在交互网页中,我们需要动态地添加一些对象,例如:如用户鼠标移到某处,出现相应提示或对话,类似于这样的功能,网站开发人员肯定需要添加元素,我们常用的是appendChild(),接下来南昌网站设计公司技术人员对大家详细介绍.

DOM提供了一些操作节点的方法。其中，最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后，appendChild()返回新增的节点。来看下面的例子：

var returnedNode=someNode.appendChild (newNode);

alert (returnedNode==newNode); //true

alert( someNode.las tChild==newNode); //true

如果传人到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。因此，如果在调用appendChild()时传人了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点，如下面的例子所示：

var returnedNode=someNode.appendChild(someNode.firstChild);

alert( returnedNode==someNode.firs tChild); //false

alert(returnedNode==someNodelastChild); //true

如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点(previousSibling)，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作，如下面的例子所示：

//插入后成为最后一个子节点

returnedNode=someNode.insertBefore (newNode, null);

alert(newNode==someNode.lastChild); //true

//插入后成为第一个了节点

var returnedNode=someNode.insertBefore (newNode, someNode.firstChild);

alert(re七urnedNode==newNode); //true

alert(newNode==someNode.firstChild); //true

//插入到最后一个子节点前面

returnedNode:someNode.insertBefore(newNode, someNode.lastChild);

alert(newNode==someNode.childNodes(someNode.childNodes.length-2]);//true

前面介绍的appendChild()和insertBefore()方法都只插入节点，不会移除节点。而下面要介绍的replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这.

方法返回并从文档树中被移除，同时由要插入的节点占据其位置。来看下面的例子：

//替换第一个子节点

var returnedNode=someNode.replaceChild(newNode, someNode.firstChild);

//替换最后一个子节点

returnedNode=someNode.replaceChild (newNode, someNode.lastChild);

在使用replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。

如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除节点。被移除的节点将成为方法的返回值，如下面的例子所示：

//移除第一个子节点

var formerFirstChild=someNode.removeChild( someNode.firstChild);

//移除最后一个子节点

var formerLastChild=someNode.removeChild( someNode.las tChild);

与使用replaceChild()方法一样，通过removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有自己的位置。

前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点(使用parentNode属性)。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。

本文仅限内部技术人员学习交流,不得作于其他商业用途.原创文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn 如转载请注明出处!