首先 從定義來理解 這兩個方法：
appendChild() 方法：可向節點的子節點列表的末尾添加新的子節點。語法：appendChild(newchild)
insertBefore() 方法：可在已有的子節點前插入一個新的子節點。語法 ：insertBefore(newchild,refchild)
相同之處：插入子節點
不同之處：實現原理方法不同。
appendChild方法是在父級節點中的子節點的末尾添加新的節點（相對於父級節點 來說）。
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的一樣，都是那個新的節點變量，而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()方法插入節點，是可以在子節點列表的任意位置。
呵呵呵。。。有些方法不只是作用於定義的那些特性，只要 符合語法，結合一些屬性總會有意想不到的收獲。
作為初學者，我懂的不多，或許我的理解還很淺薄，有些可能理解錯了，希望看到的能夠給我提點下，我不求別的，我只希望在這裡記錄點點滴滴和吸取大家的建議 來促進我的成長。。。