把新创建的节点插入到文档的节点树最简单的方法就是让它成为该文档某个现有节点的子节点,appendChild(newChild)作为要添加子节点的节点的方法被调用,将一个标识为newChild 的节点添加到它的子节点的末尾。
语法如下:object.appendChild(newChild)
下面的实例演示如何在节点树中插入节点:[code]
明显看出使用 newParagraph.appendChild(newTextNode)语句后,节点newTextNode 和节点newParagraph.firstChild 表示同一节点,证明生成的文本节点已经添加到
元素节点的子节点列表中。
insertBefore(newChild,targetChild)方法将文档中一个新节点newChild 插入到原始节点 targetChild 前面,语法如下:parentElement.insertBefore(newChild,targetChild)
调用此方法之前,要明白三点:
要插入的新节点 newChild
目标节点 targetChild
这两个节点的父节点 parentElement
其中,parentElement=targetChild.parentNode,且父节点必须是元素节点。以下面的语句为例:<p id="p1">Welcome to<B> DOM </B>World! </p>
下面的代码演示如何在文本节点“Welcome to”之前添加一个同父文本节点“NUDT YSQ”:[code]
Welcome to DOM World!
[/code]输出信息按照父节点、第一个子节点、下一个子节点、最后一个子节点的顺序显示,程序运行结果如图所示。可以很直观看出文本节点“Welcome to”在作为insertBefore( )方法的目标节点后,在其前面插入文本节点“NUDT YSQ”作为
元素节点的第一子节点。
DOM 本身并没有提供类似insertBefore(newChild,targetChild)方法在节点之后插入新节点方法insertAfter(newChild,targetChild),但是可以通过如下形式实现:function insertAfter(newChild,targetChild)
{
var parentElement=targetChild.parentNode;
//检查目标节点是否是父节点的最后一个子节点
//是:直接按appendChild( )方法插入新节点
if(parentElement.lastChild==targetChild)
{
parentElement.appendChild(newChild);
}
//不是:使用目标节点的nextSibling 属性定位到它的下一同父节点,按insertBefore( )方法操作
else
parentElement.insertBefore(newChild,targetElement.nextSibling);
}
可以直观看出,insertAfter( )函数实现了在目标节点后面插入同级子节点的功能,扩了DOM 关于节点插入和添加的方法。