我正在寻找替换 DOM 中的元素。
例如，<a>我想用 a 替换一个元素<span>。
我将如何去做呢？
如何使用 Javascript 替换 DOM 元素？
IT技术
javascript
dom
2021-02-09 21:33:56
6个回答
通过使用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>
A.replaceWith(span) - 不需要父母
通用形式：
target.replaceWith(element)
比以前的方法更好/更干净。
对于您的用例：
A.replaceWith(span)
高级用法
- 您可以传递多个值（或使用扩展运算符
...）。 - 任何字符串值都将作为文本元素添加。
例子：
// Initially [child1, target, child3]
target.replaceWith(span, "foo") // [child1, span, "foo", child3]
const list = ["bar", span]
target.replaceWith(...list, "fizz") // [child1, "bar", span, "fizz", child3]
安全处理null目标
如果您的目标有机会为空，您可以考虑使用 newish?. 可选链运算符。如果目标不存在，则什么都不会发生。在这里阅读更多。
target?.replaceWith?.(element)
相关的 DOM 方法
支持的浏览器- 95% 21 年 10 月
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a 是被替换的 A 元素。
这个问题很老了，但我发现自己正在学习微软认证，并且在学习书中建议使用：
oldElement.replaceNode(newElement)
我查了一下，好像只支持IE。哦..
我想我只是将它添加到这里作为一个有趣的旁注；)
我有一个类似的问题，并找到了这个线程。Replace 对我不起作用，而且对我的情况来说，去父母身边很困难。内部 Html 替换了孩子，这也不是我想要的。使用outerHTML 完成了工作。希望这对其他人有帮助！
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>