Javascript menambah nod

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">点击这里添加新节点</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("这是新节点");
    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">点击添加新节点</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("这是新节点 ");
    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    在指定节点的后面插入节点
  * pram    newNode    要添加的新节点
  * pram    thisNode    当前节点（指定节点）
**/
function insertAfter(newNode, thisNode){
    var parent = thisNode.parentNode;
    if (parent.lastChild == thisNode) {
        // 如果父节点的最后一个节点是指定节点，则直接添加
        parent.appendChild(newNode);
    }else {
        parent.insertBefore(newNode , thisNode.nextSibling);
        //如果不是，则在指定节点的下一个节点前面插入
    }
}
/**
  * func    appendChildPre    在指定节点的前面插入子节点
  * pram    parent    父节点
  * pram    newNode    要添加的新节点
**/
function appendChildPre(parent , newNode){
    if(parent.length>=1){
        // 如果存在子节点，则在第一个子节点的前面添加
        parent.insertBefore(newNode , parent.firstNode);
    }else{
        // 如果不存在，则在最后添加
        parent.appendChild(newNode);
    }
}