如何使用JavaScript替换DOM元素？

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

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

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

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

语法：

node.parentNode

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

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

示例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<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>

</html>

效果图：

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

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

语法：

node.replaceChild(newNode, oldNode)

参数：

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

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

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

示例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p{
				background-color: #F0AD4E;
				padding: 5px;
				color: white;
			}
		</style>
	</head>

	<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>

</html>

效果图：