【JavaScript】添加DOM节点

最新推荐文章于 2024-06-25 19:24:28 发布

apr_su

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量1k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/LT_Future/article/details/88757746

版权

这篇博客介绍了如何使用JavaScript操作HTML DOM树，包括通过id和标签名查找元素，创建新的元素节点、文本节点和属性节点，并详细阐述了如何追加节点到尾部或中间，以及删除和隐藏节点的方法。

摘要由CSDN通过智能技术生成

HTML DOM树

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

查找节点

	var x=document.getElementById("dv");

	var y=document.getElementsByTagName("p")[i];

添加节点

1. 创建节点

1>元素节点：var node =document.createElement(“标签名”);

2>文本节点：

	Var textNode=document.createTextNode("文本内容");
	节点.innerHtML="文本内容";//可以识别html
	节点.innerText="文本内容";//非标准，有些浏览器无法识别

3>属性节点：

节点.setAttribute(“属性名”,“属性值”);

1.这是标准的方法，符合xml规范，可以添加任意的属性；
2.节点.属性名=“属性值”，例如aNode.jk=“jk”;//部分浏览器时可以使用

2. 追加节点

a. 追加到尾部：父节点.appendChild(子节点);

b. 插入到中间（插入到某一个元素的前面)：父节点.insertBefore(新元素，旧元素);

demo

关注

专栏目录