HTML DOM replaceChild() Method | DOM 对象:HTML DOM 元素对象

返回到:DOM 对象:HTML DOM 元素对象

定义和用法

replaceChild() 方法可将某个子节点替换为另一个。

新节点可以是文本中已存在的,或者是你新创建的。

所有主要浏览器都支持 replaceChild 方法

语法

node.replaceChild(newnode,oldnode)

参数

参数类型描述
newnodeNode 对象必须。你要插入的节点对象。
oldnodeNode object必须。你要移除的节点对象。

返回值

类型描述
Node object替换的节点

技术细节

DOM 版本Core Level 1 Node Object

实例

将某个子节点替换为另一个:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</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>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4528.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月14日 上午11:14
下一篇 2021年12月14日 上午11:20

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注