162

我正在寻找替换DOM中的元素。
例如，有一个<a>元素我要替换为a <span>。

我将如何去做？

javascript dom

— 我的天啊
source

9

target.replaceWith(element);是执行此操作的现代方法（ES5 +）

— Gibolt

2

@Gibolt ES的DOM规范有什么？而且，它还不是DOM标准的一部分，而ES5是9年前发布的。

— pishpish

ES5 +表示ES5或更高版本。即使ES5已经使用9年了，以后的版本也不是那么老。

— JustinCB

如果您仍然使用StackOverflow，则值得在下面选择新的标准答案。

— mikemaccana

202

通过使用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>

— 比约恩
source

7

这个例子是行不通的。您应该将脚本块放在正文的末尾以使其起作用。此外，仅出于娱乐目的：尝试在操作后添加[alert（myAnchor.innerHTML）]行。

— KooiInc，2009年

锚点innerText中的StackOverflow出现拼写错误

— rahul，2009年

8

如果它是html根元素

— 怎么办

谢谢@Bjorn Tipling。我创建了如何一个ID和一个函数添加到替换元素，这里的后续问题：stackoverflow.com/questions/15670261/...

— JDelage

65

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

a是替换的A元素。

— 卡马雷
source

1

@Bjorn Tipling的回答实际上不起作用。这是KooiInc的（正确！）答案，也正确，注释。现在可以了！;-)两者都发送！

— Pedro Ferreira

4

当然，您可能想出了一个不是A lol的变量名

— 魁北克

61

`A.replaceWith(span)` -无需父母

通用形式：

target.replaceWith(element);

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

对于您的用例：

A.replaceWith(span);

Mozilla文件

支持的浏览器 -94％2020年4月

— 吉博尔特
source

13

IE11或Edge 14中不支持（现在：2016-11-16）。

— 2016年

3

尝试使用Google的Closure或其他编译器转换为ES5。如果您有更好，更可维护的选择

— 则不

1

因此转堆。您可以优化，缩小和下变频所有功能。

— 快来

4

我认为，如果要在我要支持的所有浏览器上使用的使用代码之间进行选择，还是要重新构建整个构建过程以使用Closure的选择，我会选择在我要支持的所有浏览器上使用的使用代码。。

— cdmckay

5

@jor我有点同意支持尽可能多的浏览器，但是由于IE或Edge不完整或只是“想有所不同”，所以我拒绝重新编写代码。有一些标准，如果他们不遵循这些标准，而只有少数人支持它，那就是他们的问题，而不必影响我们作为Web开发人员的工作。

— David Tabernero M.

4

这个问题很老，但是我发现自己正在学习Microsoft认证，因此建议在学习书中使用：

oldElement.replaceNode(newElement)

我查了一下，它似乎仅在IE中受支持。h

我以为我会在这里添加它作为有趣的便笺;）

— Zeliax
source

2

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

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

— 肖恩
source

0

您可以使用替换节点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)
})

— 努鲁·胡达
source

-1

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

— 基里尔
source

-1

鉴于已经提出的选项，最简单的解决方案是无需找到父项：

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

— 屋
source

如何使用Javascript替换DOM元素？

A.replaceWith(span) -无需父母

`A.replaceWith(span)` -无需父母