我想替换DOM中的一个元素。 例如，有一个<a>元素，我想用<span>代替。
我该怎么做呢?
当前回答
这个问题很老了，但我发现自己在学习微软认证，在学习书上建议使用:
oldElement.replaceNode(newElement)
我查了一下，似乎只有IE支持。哎. .
我想我只是把它添加在这里作为一个有趣的旁注;)
其他回答
考虑到已经提出的选项，最简单的解决方案是不找父母:
var parent = document.createElement("div");
var child = parent.appendChild(document.createElement("a"));
var span = document.createElement("span");
// for IE
if("replaceNode" in child)
child.replaceNode(span);
// for other browsers
if("replaceWith" in child)
child.replaceWith(span);
console.log(parent.outerHTML);
通过使用replaceChild():
<html>
<head>
</head>
<body>
<div>
<a id="myAnchor" href="http://www.stackoverflow.com">StackOverflow</a>
</div>
<script type="text/JavaScript">
var myAnchor = document.getElementById("myAnchor");
var mySpan = document.createElement("span");
mySpan.innerHTML = "replaced anchor!";
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>
在创建新元素(createElement)后，你可以在目标元素的父元素上使用replaceChild:
const newElement = document.createElement(/*...*/);
const target = document.getElementById("my-table");
target.parentNode.replaceChild(newElement, target);
如果你的新元素的起点是HTML，你可以使用insertAdjacentHTML，然后在父元素上使用removecchild(或者在现代环境中对元素本身进行remove):
const target = document.getElementById("my-table");
target.insertAdjacentHTML("afterend", theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`
这是最好的方法。父母不需要。只需使用Element。outerHTML =模板;
// Get the current element
var currentNode = document.querySelector('#greeting');
// Replace the element
currentNode.outerHTML =
'<div id="salutations">' +
'<h1>Hi, universe!</h1>' +
'<p>The sun is always shining!</p>' +
'</div>';
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a是替换后的a元素。
