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]

安全处理空目标

如果目标有可能为空，则可以考虑使用newish ?。可选的连接操作符。如果目标不存在，什么都不会发生。点击这里阅读更多。

target?.replaceWith?.(element)

相关DOM方法

阅读更多——孩子。之前和孩子，之后 阅读更多——父母。Prepend和parent.append

Mozilla文档

支持的浏览器- 97% 11月22日

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

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

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]

安全处理空目标

如果目标有可能为空，则可以考虑使用newish ?。可选的连接操作符。如果目标不存在，什么都不会发生。点击这里阅读更多。

target?.replaceWith?.(element)

相关DOM方法

阅读更多——孩子。之前和孩子，之后 阅读更多——父母。Prepend和parent.append

Mozilla文档

支持的浏览器- 97% 11月22日

在创建新元素(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()`

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

a是替换后的a元素。