如何使用Javascript替换DOM元素？ A.replaceWith（span） - 无需父级

javascript dom

2022-08-30 01:20:35

我希望替换 DOM 中的一个元素。
例如，有一个元素我想用代替。<a><span>

我该怎么做呢？

答案 1

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

答案 2

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

如果目标有机会为 null，则可以考虑使用 newish 可选链接运算符。如果目标不存在，则不会发生任何事情。在此处阅读更多内容。?.

target?.replaceWith?.(element)

如何使用Javascript替换DOM元素？ A.replaceWith（span） - 无需父级

A.replaceWith（span） - 无需父级

高级用法

安全处理目标null

相关的 DOM 方法

`A.replaceWith（span）` - 无需父级

安全处理目标`null`