要想创建一个元素节点，首先要创建一个新元素，然后在新元素中添加
1、appendChild（）尾部添加
使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位节点（5）添加节点
代码示范：
<div id="div1"> ?<p id="p1">这是第一个初始段落</p> ?<p id="p2">这是第二个初始段落</p></div><script>var para = document.createElement("p"); //新建p标签类型的节点var content = document.createTextNode("这是一个新建节点"); //为节点添加内容para.appendChild(content); //组合节点var position = document.getElementById("div1"); //定位节点position.appendChild(para); //添加节点</script>2、insertBefore（）首部添加
使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位大范围（5）定位小范围（6）添加节点
代码示范：
<div id="div1"> ?<p id="p1">这是第一个初始段落</p> ?<p id="p2">这是第二个初始段落</p></div><script>var para = document.createElement("p"); //创建p标签类型的节点var content = document.createTextNode("这是新添加的节点"); //为节点添加内容para.appendChild(content); //组合节点var big_position = document.getElementById("div1"); //定位大范围var small_position = document.getElementById("p2"); //定位小范围big_position.insertBefore(para,small_position); //添加节点可以看出，insertBefore（）的还使用方法与appendChild（）截然不同。有两个参数：（1）是要添加的节点名称 （2）是节点要添加在哪个元素的前方
3、removeChild（）移除节点
使用步骤：（1）获取父元素（2）获取目标元素（3）组合移除
代码示范：
<div id="div1"> ?<p id="p1">这是第一个初始段落</p> ?<p id="p2">这是将被移除的段落</p> ?<p id="p3">这是第二个初始段落</p></div><script>var parent = document.getElementById("div1"); //获取父元素var child = document.getElementById("p2"); //获取目标元素parent.removeChild(child); //组合删除删除节点必须知道父节点 必须知道
4、replaceChild（）替换节点
使用步骤：（1）获取父元素（2）获取目标元素（3）替换
代码示范：
<div id="div1"> ???<p id="p1">这是一个初始段落</p> ???<p id="p2">这是一个初始段落</p> ???<p id="p3">这是一个初始段落</p> ???<p id="p4">这是一个初始段落</p></div><script> ???var para = document.createElement("p"); ???var content = document.createTextNode("I am fine"); ???para.appendChild(content); ???var parent = document.getElementById("div1"); ???var child = document.getElementById("p2"); ???parent.replaceChild(para,child);5、NodeList
NodeList对象是一个从文档中获取的节点列表集合
所有浏览器中的childNodess属性返回的是NodeList对象 大部分浏览器querySelectAll属性返回的是NodeList对象
HTML Collection 与 NodeList的区别
（1）前者是HTML元素的集合，后者是文档节点的集合
（2）都与数组对象类似，可以使用索引来获取元素
（3）前者可以通过索引、ID、name来获取元素，后者只能通过索引
（4）只有NodeList对象包含有属性节点和文本节点
JS HTML DOM元素节点
原文地址：https://www.cnblogs.com/zhuyan-dailycheck/p/9893479.html