你可以使用Node. replacewith (newNode)替换HTML元素或节点。

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

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>

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

oldElement.replaceNode(newElement)

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

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

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日

这是最好的方法。父母不需要。只需使用Element。outerHTML =模板;

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

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

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

你可以使用Node. replacewith (newNode)替换HTML元素或节点。

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

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>