我正在寻找替换DOM中的元素。
例如，有一个<a>元素我要替换为a <span>。
我将如何去做？
通过使用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目标
如果您的目标有可能为空，则可以考虑使用新的?. 可选链接运算符。如果目标不存在，则不会发生任何事情。在这里阅读更多。
target?.replaceWith(element)
相关的DOM方法
支持的浏览器-94％2020年4月
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a是替换的A元素。
这个问题很老，但是我发现自己正在学习Microsoft认证，并且在学习书中建议使用：
oldElement.replaceNode(newElement)
我查了一下，它似乎仅在IE中受支持。h
我以为我会在这里添加它作为有趣的便笺;）
我有一个类似的问题，发现了这个线程。替换对我来说不起作用，而对我而言，由父母陪伴很难。内部HTML取代了孩子，这也不是我想要的。使用outerHTML完成了工作。希望这对别人有帮助！
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
您可以替换HTML Element或Node使用Node.replaceWith(newNode)。
此示例应保留原始节点中的所有属性和子级：
const links = document.querySelectorAll('a')
links.forEach(link => {
const replacement = document.createElement('span')
// copy attributes
for (let i = 0; i < link.attributes.length; i++) {
const attr = link.attributes[i]
replacement.setAttribute(attr.name, attr.value)
}
// copy content
replacement.innerHTML = link.innerHTML
// or you can use appendChild instead
// link.childNodes.forEach(node => replacement.appendChild(node))
link.replaceWith(replacement)
})
如果您具有以下元素：
<a href="#link-1">Link 1</a>
<a href="#link-2">Link 2</a>
<a href="#link-3">Link 3</a>
<a href="#link-4">Link 4</a>
运行以上代码后，您将获得以下元素：
<span href="#link-1">Link 1</span>
<span href="#link-2">Link 2</span>
<span href="#link-3">Link 3</span>
<span href="#link-4">Link 4</span>
替换LI元素的示例
function (element) {
let li = element.parentElement;
let ul = li.parentNode;
if (li.nextSibling.nodeName === 'LI') {
let li_replaced = ul.replaceChild(li, li.nextSibling);
ul.insertBefore(li_replaced, li);
}
}
鉴于已经提出的选项，最简单的解决方案是不找父母：
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);
本文地址：http://javascript.askforanswer.com/ruheshiyongjavascripttihuandomyuansu.html
文章标签：dom , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文章标签：dom , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！