JavaScript 插入節(jié)點

■知識點

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

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

appendChild(newchild)

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

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

insertBefore(newchild,refchild)

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

■實例設(shè)計

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

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

<script>

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

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

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

document.getElementByld ("box").appendChild(p); //獲取box元素，把段落節(jié)點增加進來

</script>

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