JavaScript 插入节点

■知识点

在文档中插入节点主要包括以下两种方法。

    appendChildO方法可向当前节点的子节点列表的末尾添加新的子节点。其用法如下：

appendChild(newchild)

其中，参数newchild表示新添加的节点对象。返回新增的节点。

    使用insertBefore()方法可在己有的子节点前插入一个新的子节点。其用法如下：

insertBefore(newchild,refchild)

其中，参数newchild表示新插入节点，refchild表示在此节点前插入新节点。返回新增的子节点。

■实例设计

【示例1】下面的示例展示了如何把段落文本增加到文档中的指定的div元素中，使它成为当前节点的最后一个子节点。

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

<script>

var p = document.createElement("p");                      //创建段落节点

var txt = document.createTextNode("盒模型");         //创建文本节点，文本内容为“盒模型”

p.appendChild(txt);                                                    //把文本节点增加到段落节点中

document.getElementByld ("box").appendChild(p); //获取box元素，把段落节点增加进来

</script>

    如果文档树中己经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加节点是DocumentFragment节点，则不会直接插入，而是把它的子节点插入当前节点的末尾。