JavaScript中appendChild与insertBefore插入节点的区别详解

appendChild与insertBefore基础对比

在JavaScript DOM操作中，appendChild和insertBefore均用于向父节点插入子节点，但两者在插入位置和参数使用上存在显著差异。

假设有一个ID为test的div元素，内部包含两个p节点，我们需要向该div中插入一个新的子节点。

<div id="test"><p id="x1">Node</p><p>Node</p></div>

以下是两种方法的具体实现代码，测试时请根据需求注释掉另一种方法。

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测试从这里开始
//appendChild方法：
oTest.appendChild(newNode);
//insertBefore方法：
oTest.insertBefore(newNode,null);
</script>

执行上述代码后，新创建的节点会被添加到div元素的子节点列表末尾。如需查看DOM结构，IE用户可使用IE Developer Toolbar插件，Firefox用户则可使用Firebug。

通过该示例可以明确，appendChild和insertBefore（当第二个参数为null时）都能实现节点插入操作。

insertBefore参数与插入位置详解

在上面的例子中，insertBefore使用了两个参数：第一个参数与appendChild相同，指定要插入的新节点；第二个参数是insertBefore特有的，用于指定插入位置。该参数不仅可以为null（表示追加到末尾），还可以指定具体的参考节点。

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>

此示例演示了如何在ID为x1的节点之前插入一个新节点。

或者，也可以利用nextSibling属性指定插入位置：

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>

此示例演示了如何在x1节点的下一个兄弟节点之前插入一个新节点。

此外，还可以直接操作childNodes数组来指定插入位置：

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

此示例演示了如何在第一个子节点之前插入一个新节点。通过修改childNodes的索引（如[0], [1]等），可以在子节点列表的任意位置插入新节点。

由此可见，insertBefore方法的核心特性是在指定参考节点之前插入新节点。虽然示例一中通过传入null实现了类似appendChild的效果（追加到末尾），但结合其他示例可以看出，insertBefore允许在子节点列表的任意位置插入新节点。

两种方法的核心区别总结

总结上述示例可得： appendChild() 方法始终在节点的子节点列表末尾添加新的子节点。 insertBefore() 方法允许在节点的子节点列表中的任意指定位置插入新的节点。