DOM替换节点

最新推荐文章于 2024-07-21 17:10:44 发布

最新推荐文章于 2024-07-21 17:10:44 发布 · 164 阅读

文章标签：

#DOM #节点

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了如何使用JavaScript中的replaceChild方法替换DOM树中的节点。通过一个简单的示例展示了如何根据用户输入的内容和标签名创建新的DOM元素并替换现有元素。

一介绍

替换节点可以使用replaceChild()方法来实现。

replaceChild()方法用来将旧的节点替换成新的节点。

obj. replaceChild(new,old)

new：替换后的新节点。

old：需要被替换的旧节点。

二应用

替换节点，本示例在页面中输入替换后的标记和文本，单击“替换”按钮将原来的文本和标记替换成为新的文本和标记。

三代码

<head>
<title>替换节点</title>
<script language="javascript">
<!--
function repN(str,bj)
{
var rep=document.getElementById('b1');
if(rep)
{
var newNode=document.createElement(bj);
		 newNode.id="b1";
var newText=document.createTextNode(str);
		 newNode.appendChild(newText);
		 rep.parentNode.replaceChild(newNode,rep);
}
}
-->
</script>
</head>
<body>
<b id="b1">可以替换文本内容</b>
<br />
输入标记：<input id="bj" type="text" size="15"/><br />
输入文本：<input id="txt" type="text" size="15"/><br />
<input type="button" value="替换" onclick="repN(txt.value,bj.value)"/>
</body>

四运行结果