JavaScript 插入節(jié)點(diǎn)

■知識(shí)點(diǎn)

在文檔中插入節(jié)點(diǎn)主要包括以下兩種方法。

    appendChildO方法可向當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。其用法如下：

appendChild(newchild)

其中，參數(shù)newchild表示新添加的節(jié)點(diǎn)對(duì)象。返回新增的節(jié)點(diǎn)。

    使用insertBefore()方法可在己有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。其用法如下：

insertBefore(newchild,refchild)

其中，參數(shù)newchild表示新插入節(jié)點(diǎn)，refchild表示在此節(jié)點(diǎn)前插入新節(jié)點(diǎn)。返回新增的子節(jié)點(diǎn)。

■實(shí)例設(shè)計(jì)

【示例1】下面的示例展示了如何把段落文本增加到文檔中的指定的div元素中，使它成為當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。

<div id="box"></div>

<script>

var p = document.createElement("p");                      //創(chuàng)建段落節(jié)點(diǎn)

var txt = document.createTextNode("盒模型");         //創(chuàng)建文本節(jié)點(diǎn)，文本內(nèi)容為“盒模型”

p.appendChild(txt);                                                    //把文本節(jié)點(diǎn)增加到段落節(jié)點(diǎn)中

document.getElementByld ("box").appendChild(p); //獲取box元素，把段落節(jié)點(diǎn)增加進(jìn)來(lái)

</script>

    如果文檔樹(shù)中己經(jīng)存在參數(shù)節(jié)點(diǎn)，則將從文檔樹(shù)中刪除，然后重新插入新的位置。如果添加節(jié)點(diǎn)是DocumentFragment節(jié)點(diǎn)，則不會(huì)直接插入，而是把它的子節(jié)點(diǎn)插入當(dāng)前節(jié)點(diǎn)的末尾。