这篇文章给大家分享的是有关javascript如何替换节点的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 在JavaScript中，可以利用repla
这篇文章给大家分享的是有关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 h2 = document.getElementsByTagName("h2")[0]; //获取一级标题的引用
var h3 = documeng.createElement("h3"); //创建二级标题元素并引用
red.replaceChild(h3, h2); //把一级标题替换为二级标题
}演示发现，当使用新创建的二级标题替换一级标题之后，原来的一级标题所包含的标题文本已经不存在了。这说明替换节点的操作不是替换元素名称，而是替换其包含的所有子节点以及其包含的所有内容。
同样的道理，如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助 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如何替换节点”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: javascript如何替换节点
本文链接: https://lsjlt.com/news/88089.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0