首先 从定义来理解 这两个方法：
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)
相同之处：插入子节点
不同之处：实现原理方法不同。
　　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。
　　　　 insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。
来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div
代码如下:

1

2

3

代码如下:
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的一样，都是那个新的节点变量，而insert第二个参数不仅可以为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()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

呵呵呵。。有些方法不只是作用于定义的那些特性，只要 符合语法，结合一些属性总会有意想不到的收获。

作为初学者，我懂的不多，或许我的理解还很浅薄，有些可能理解错了，希望看到的能够给我提点下，我不求别的，我只希望在这里记录点点滴滴和吸取大家的建议 来促进我的成长。。

下载本文