上節(jié)中，我們講解了如何創(chuàng)建新節(jié)點(diǎn)。創(chuàng)建的新節(jié)點(diǎn)如果想發(fā)揮作用，必需添加到DOM（HTML文檔）。

Javascript提供了兩種添加節(jié)點(diǎn)的方法：

insertBefore()

insertBefore() 方法可以在指定節(jié)點(diǎn)的前面插入新節(jié)點(diǎn)。

語法：
? ??parentNode.insertBefore(newNode , thisNode)
參數(shù)/返回值說明：

例如，在 id="dome" 的節(jié)點(diǎn)前面添加節(jié)點(diǎn)的語句為：

var ele_div=document.createElement("div");
var thisNode=document.getElementById("demo");
this.parentNode.insertBefore(ele_div , thisNode);

注意：insertBefore() 是當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的一個(gè)方法，添加節(jié)點(diǎn)時(shí)，不但要知道當(dāng)前節(jié)點(diǎn)，還要知道當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。一般情況下，可以通過 thisNode.parentNode 來獲取父節(jié)點(diǎn)。

舉例，在指定節(jié)點(diǎn)前面不斷增加新節(jié)點(diǎn)：

<div id="demo">
    <div id="thisNode">點(diǎn)擊這里添加新節(jié)點(diǎn)</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("這是新節(jié)點(diǎn)");
    ele_div.appendChild(ele_text);
    this.parentNode.insertBefore(ele_div , this);
}
</script>

appendChild()

appendChild() 可以向指定節(jié)點(diǎn)添加新的子節(jié)點(diǎn)，并將添加的節(jié)點(diǎn)放在最后。

語法：
? ??parentNode.appendChild(newNode)
參數(shù)/返回值說明：

例如，向 id="dome" 的節(jié)點(diǎn)添加子節(jié)點(diǎn)的語句為：

var ele_div=document.createElement("div");
var ele_parent=document.getElementById("demo");
ele_parent.appendChild(ele_div);

舉例，為指定節(jié)點(diǎn)不斷添加新節(jié)點(diǎn)：

<div id="demo">
    <div id="thisNode">點(diǎn)擊添加新節(jié)點(diǎn)</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("這是新節(jié)點(diǎn) ");
    ele_div.appendChild(ele_text);
    this.appendChild(ele_div);
}
</script>

遺憾的是，Javascript沒有提供在指定節(jié)點(diǎn)的后面插入節(jié)點(diǎn)的方法，也沒有提供在指定節(jié)點(diǎn)的前面插入子節(jié)點(diǎn)的方法。

不過，我們可以使用現(xiàn)有的方法來實(shí)現(xiàn)。下面給出兩個(gè)自定義的函數(shù)。

/**
  * func    insertAfert    在指定節(jié)點(diǎn)的后面插入節(jié)點(diǎn)
  * pram    newNode    要添加的新節(jié)點(diǎn)
  * pram    thisNode    當(dāng)前節(jié)點(diǎn)（指定節(jié)點(diǎn)）
**/
function insertAfter(newNode, thisNode){
    var parent = thisNode.parentNode;
    if (parent.lastChild == thisNode) {
        // 如果父節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)是指定節(jié)點(diǎn)，則直接添加
        parent.appendChild(newNode);
    }else {
        parent.insertBefore(newNode , thisNode.nextSibling);
        //如果不是，則在指定節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)前面插入
    }
}
/**
  * func    appendChildPre    在指定節(jié)點(diǎn)的前面插入子節(jié)點(diǎn)
  * pram    parent    父節(jié)點(diǎn)
  * pram    newNode    要添加的新節(jié)點(diǎn)
**/
function appendChildPre(parent , newNode){
    if(parent.length>=1){
        // 如果存在子節(jié)點(diǎn)，則在第一個(gè)子節(jié)點(diǎn)的前面添加
        parent.insertBefore(newNode , parent.firstNode);
    }else{
        // 如果不存在，則在最后添加
        parent.appendChild(newNode);
    }
}