使用JavaScript在html文档内添加新的元素节点

这篇文章主要介绍了使用JavaScript在html文档内添加新的元素节，主要打方式就是动态的改变原有html文档结构，下文详细介绍内容需要的可以参考一下

一、基本语法与解释

1.在某元素附近创建一个新的元素节点

 // 将节点插入指定标签之后  // 创建一个p标签对象  var para = document.createElement("p");  // 创建文本对象  var node = document.createTextNode("这是一个新的段落。");  // 将文本对象加入p标签对象  para.appendChild(node);  // 选出id=div1的标签  var element = document.getElementById("div1");  // 在该标签之后加上刚创建的p标签  element.appendChild(para);  // 将节点插到指定标签之前  var para = document.createElement("p");  var node = document.createTextNode("这是一个新的段落。");  para.appendChild(node);  var element = document.getElementById("div1");  var child = document.getElementById("p1");  element.insertBefore(para, child);

2.删除标签

// 删除存在的标签  // 以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素  //（删除节点必须知道父节点）：  var parent = document.getElementById("div1");  var child = document.getElementById("p1");  parent.removeChild(child);

3.修改标签

// 替换标签 var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); //将内容添加进标签 para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); //将parent中的para标签替换为child parent.replaceChild(para, child);

4.使用选择器选出某一类标签

// 选出所有同一类型的标签 获取HTMLCollection 对象。     function myFunction() {         // getElementsByTagName() 方法返回所有同一类型的标签         var myCollection = document.getElementsByTagName("p");         var i;         for (i = 0; i

二、实际应用

1.完整代码

代码如下：

  菜鸟教程(runoob.com)                       这是一个段落。
         这是另外一个段落。

2.运行效果

三、注意事项

使用选择器选出某一类标签获取HTMLCollection 对象时
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
我们可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法：valueOf(), pop(), push(), 或 join()
第二种筛选方法 NodeList
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

HTMLCollection 与 NodeList 的区别：