如何使用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
