小开

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

小开

var a = A.parentNode.replaceChild(document.createElement("span"), A);

a是替换后的a元素。

小开

`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方法

阅读更多 - child.before和child.after
阅读更多 - parent.prepend和parent.append

Mozilla Docs

11月22日

小开

这个问题很老了，但我发现自己在学习微软认证，在学习书上建议使用:

oldElement.replaceNode(newElement)

我查了一下，似乎只有IE支持。哎. .

我想我只是把它添加在这里作为一个有趣的旁注;)

小开

替换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);
}
}

小开

我有一个类似的问题，并找到了这个线程。替换对我不起作用，而且在我的情况下，通过父母是很困难的。Inner Html替换了子元素，这也不是我想要的。使用outerHTML完成了这项工作。希望这能帮助到其他人!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>

小开

考虑到已经提出的选项，最简单的解决方案是不找父母:

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

小开

可以使用Node.replaceWith(newNode)替换HTML Element或Node。

下面的例子应该保留所有来自源节点的属性和子节点:

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>

小开

创建新元素(createElement)后，可以在目标元素的父元素上使用replaceChild:

const newElement = document.createElement(/*...*/);
const target = document.getElementById("my-table");
target.parentNode.replaceChild(newElement, target);

如果新元素的起点是HTML，你可以在父元素上使用insertAdjacentHTML，然后在父元素上使用removeChild(在现代环境中，在元素本身上使用remove):

const target = document.getElementById("my-table");
target.insertAdjacentHTML("afterend", theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`

小开

这是最好的方法。父母不需要。只需使用Element.outerHTML = template;即可

// 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>';

如何在使用Javascript替换DOM元素?

A.replaceWith(span) -不需要父母

高级用法

安全处理null目标

相关DOM方法

`A.replaceWith(span)` -不需要父母

安全处理`null`目标