在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() 方法在文档中使用现有的节点替换另一个存在的节点。
示例如下:
<html><head><meta charset="utf-8"><title>123</title></head><body><ul id="mylist"><li>coffee</li><li>tea</li><li>milk</li></ul><p id="demo">单击按钮替换列表中的第一项。</p><button onclick="myfunction()">点我</button><script>function myfunction(){var textnode=document.createtextnode("water");var item=document.getelementbyid("mylist").childnodes[0];item.replacechild(textnode,item.childnodes[0]);}</script><p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p><p><strong>注意:</strong>这个例子只将文本节点的文本节点“coffee”替换为“water”,而不是整个li元素,这也是替换节点的一种备选。</p></body></html>
输出结果:
点击按钮后:
【相关推荐:javascript学习教程】
以上就是javascript怎样替换节点的详细内容。
