javascript怎样替换节点

在JavaScript中，可以利用replaceChild()方法替换节点，该方法的作用就是可将某个子节点替换为另一个，新节点可以是已存在的，或者是新创建的，语法为“node.replaceChild(newnode,oldnode)”。

本教程操作环境：windows10系统、javascript1.8.5版、Dell G3电脑。

javascript怎样替换节点

JavaScript replaceChild() 方法可以将某个子节点替换为另一个。用法如下：

nodeObject.replaceChild(new_node, old_node)

其中参数 new_node 为指定新的节点，old_node 为被替换的节点。如果替换成功，则返回被替换的节点；如果替换失败，则返回 null。

示例1

以上示例为基础重写脚本，新建一个二级标题元素并替换掉红色盒子中的一级标题元素。

var ok = document.getElementById("ok"); //获取按钮元素的引用 ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数 var red = document.getElementById("red"); //获取红色盒子的引用 var h1 = document.getElementsByTagName("h1")[0]; //获取一级标题的引用 var h2 = documeng.createElement("h2"); //创建二级标题元素并引用 red.replaceChild(h2, h1); //把一级标题替换为二级标题 }

演示发现，当使用新创建的二级标题替换一级标题之后，原来的一级标题所包含的标题文本已经不存在了。这说明替换节点的操作不是替换元素名称，而是替换其包含的所有子节点以及其包含的所有内容。

同样的道理，如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助 replaceChild() 方法在文档中使用现有的节点替换另一个存在的节点。

示例如下：

    
  
Coffee
Tea
Milk
 
单击按钮替换列表中的第一项。
 点我  
首先创建一个文本节点。
然后替换第一个列表中的第一个子节点。
 
注意:这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。
  

输出结果：

点击按钮后：

【相关推荐：javascript学习教程】

以上是javascript怎样替换节点的详细内容。更多信息请关注PHP中文网其他相关文章！