JavaScript中appendChild与insertBefore插入节点的区别与用法

appendChild与insertBefore定义对比

首先从定义层面理解这两个方法：

appendChild() 方法用于向节点的子节点列表末尾添加新的子节点。其语法格式为：appendChild(newchild)

insertBefore() 方法用于在已有的子节点之前插入一个新的子节点。其语法格式为：insertBefore(newchild, refchild)

两者的共同点在于都能实现子节点的插入操作。

不同点在于实现原理和具体方法存在差异。

appendChild 方法的作用是在父级节点中的子节点列表末尾添加新节点（相对于父级节点而言）。

insertBefore 方法的作用是在已有节点之前添加新节点（相对于子节点列表而言）。

使用insertBefore插入节点实例

接下来通过一个简单的实例进行演示：在 id 为 box-con 的元素末尾添加一个子节点 div。

 
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2" >2</p>
<p class="con2" >3</p>
</div>

 
window.onload = function () {
var btn = document.getElementById("creatbtn");
btn.onclick = function() {
insertEle();
} 
} 
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
newNode.innerHTML = " This is a newcon ";
//oTest.appendChild(newNode);
oTeset.insertBefore(newNode,null); // 这两种方法均可实现
} 

这里 insertBefore 的第一个参数与 appendChild 相同，都是新创建的节点变量。而 insertBefore 的第二个参数不仅可以为 null，还可以指定参照节点，例如：

 
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " This is a newcon ";
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
} 

或者采用以下方式：

 
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面，
也就是说 插入id为P1节点元素的后面。
} 

这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。

reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。

previousSibling - 取得某节点的上一个同级节点

由此可见，insertBefore() 方法虽然定义是在已有子节点前插入新节点，但结合 nextSibling 等属性，实际上可以在子节点列表的任意位置插入节点。

许多方法不仅局限于定义中的特性，只要符合语法规范，结合相关属性使用，往往能带来意想不到的效果。

作为初学者，我的理解可能尚显浅薄，甚至可能存在错误。希望读者能给予指正，我在此记录学习点滴并吸收建议以促进成长。