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

Question

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

我该怎么做呢？

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

Answer 2

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

a是被替换的A元素。

Answer 3

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

通用表格：

target.replaceWith(element);

比以前的方法更好/更清洁。

对于您的用例：

A.replaceWith(span);

Mozilla Docs

Supported Browsers - 2019年4月90％

Answer 4

这个问题很老了，但我发现自己正在攻读微软认证，并且在研究书中建议使用：

oldElement.replaceNode(newElement)

我查了一下它似乎只在IE中得到支持。 DOH ..

我以为我只是在这里添加它作为一个有趣的旁注;）

Answer 5

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

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

如果新元素的起点是 HTML，则可以在父元素上使用 insertAdjacentHTML，然后使用 removeChild（或在元素本身上使用 remove，在现代环境中）：< /p>

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

Answer 6

替换LI元素的示例

module FrontendTest exposing (..)

Answer 7

我遇到了类似的问题，并找到了该线程。替换对我而言不起作用，而对于我的情况，由父母陪伴很难。内部HTML取代了孩子，这也不是我想要的。使用outerHTML完成了工作。希望这对别人有帮助！

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

Answer 8

为已经提出的选项提供最简单的解决方案，而无需找到父项：

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

Answer 9

您可以使用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>

如何使用Javascript替换DOM元素？

9 个答案:

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

如何使用Javascript替换DOM元素？

9 个答案:

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

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