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

我该怎么做呢?


当前回答

考虑到已经提出的选项,最简单的解决方案是不找父母:

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

其他回答

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

oldElement.replaceNode(newElement)

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

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

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

a是替换后的a元素。

考虑到已经提出的选项,最简单的解决方案是不找父母:

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

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

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

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