Dalam bahagian sebelumnya, kami menerangkan cara membuat nod baharu. Nod baharu yang dibuat mesti ditambahkan pada DOM (dokumen HTML) jika ia berguna.

Javascript menyediakan dua kaedah untuk menambah nod:

insertBefore()

insertBefore() method A new nod boleh dimasukkan di hadapan nod yang ditentukan.

Sintaks:
parentNode.insertBefore(newNode, thisNode)
Parameter/keterangan nilai pulangan:

Untuk contoh , pernyataan untuk menambah nod di hadapan nod dengan id="dome" ialah:

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

Nota: insertBefore() ialah kaedah nod induk nod semasa nod, anda bukan sahaja mesti mengetahui nod semasa, dan juga perlu mengetahui nod induk nod semasa. Secara amnya, nod induk boleh diperolehi melalui Node.parentNode ini.

Contohnya, tambahkan nod baharu di hadapan nod yang ditentukan:

<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() boleh menambah nod anak baharu pada nod yang ditentukan , dan Letakkan nod tambahan di hujungnya.

Sintaks:
parentNode.appendChild(newNode)
Parameter/keterangan nilai pulangan:

Sebagai contoh, kepada Pernyataan untuk menambah nod anak pada nod dengan id="dome" ialah:

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

Sebagai contoh, untuk terus menambah nod baharu pada nod yang ditentukan:

<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>

Malangnya, Javascript tidak disediakan di belakang nod yang ditentukan Tiada kaedah untuk memasukkan nod, mahupun kaedah untuk memasukkan nod anak di hadapan nod yang ditentukan.

Namun, kita boleh menggunakan kaedah sedia ada untuk mencapai matlamat ini. Dua fungsi tersuai diberikan di bawah.

/**
  * 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);
    }
}