首先 從定義來理解 這兩個方法：
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()方法插入節點，是可以在子節點列表的任意位置。