如何使用JavaScript替换DOM元素？

最新推荐文章于 2024-04-27 05:56:04 发布

qq_54978068

最新推荐文章于 2024-04-27 05:56:04 发布

阅读量4.8k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_54978068/article/details/122430486

版权

本文介绍了使用JavaScript替换DOM元素的两种方法：1) 结合parentNode属性和replace()方法；2) 使用replaceChild()方法。详细阐述了这两个方法的语法、示例，并列举了支持这些方法的浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用JavaScript将一个DOM元素替换为另一个元素？下面本篇文章就来给大家介绍一些使用JavaScript替换DOM元素的方法，希望对大家有所帮助。

在JavaScript中可以使用以下几种方法来将一个DOM元素替换为另一个元素：

方法1：使用parentNode属性和replace()方法

parentNode属性以Node 对象的形式返回指定节点的父节点；如果指定节点没有父节点，则返回 null。

语法：

node.parentNode
返回值：返回一个Node对象，表示节点的父节点，如果没有父节点，则返回null。

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

示例：

<body style="text-align:center;" id="body">
	<p style="font-size: 18px; font-weight: bold;">单击按钮，替换dom中的a标签元素</p>
	<div>
		<a id="a" href="#">需要替换的a标签</a>
	</div>
	<br>
	<button onclick="Run()">点击</button>
	<p id="DOWN" style="color:red; font-size: 20px; font-weight: bold;"> </p>
	<script>
		var el_down = document.getElementById("DOWN");

		function Run() {
			var aEl = document.getElementById("a");
			var newEl = document.createElement("span");
			newEl.innerHTML = "span标签中替换的文本!";
			aEl.parentNode.replaceChild(newEl, aEl);
			el_down.innerHTML = "a元素被替换为span元素。";
		}
	</script>
</body>

效果图：

1.gif

方法2：使用replaceChild()方法和replace()方法

replaceChild()方法用新节点替换子节点；此新节点可以是文档中的现有节点，也可以是新创建的节点。

语法：

node.replaceChild(newNode, oldNode)
参数：

●　newNode：此参数是必需的。它指定要插入的节点对象。

●　oldNode：此参数是必需的。它指定要删除的节点对象。

返回值：返回一个节点对象，表示替换的节点。

示例：

<body style="text-align:center;" id="body">
	<h3>单击按钮，替换dom中的a标签元素</h3>
	<div>
		<a id="a" href="#">需要替换的a标签</a>
	</div>
	<br>
	<button onclick="Run()">点击</button>
	<div id="DOWN" style="color:red; font-size: 20px; font-weight: bold;"> </div>
	<script>
		var el_down = document.getElementById("DOWN");

		function Run() {
			var aEl = document.getElementById("a");
			var newEl = document.createElement("p");
			newEl.innerHTML = "p标签中替换的文本!";
			aEl.parentNode.replaceChild(newEl, aEl); 
			el_down.innerHTML = "a元素被替换为p元素。";
		}
	</script>
</body>

2.gif

支持的浏览器：

●　Google Chrome

●　Mozila Firefox

●　Internet Explorer

●　Safari

●　Opera