如何使用Javascript替换DOM元素?

问题描述 投票:142回答:6

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

我该怎么做呢?

javascript dom
6个回答
190
投票

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

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

a是被替换的A元素。


43
投票

A.replaceWith(span) - No parent needed

通用形式:

target.replaceWith(element);

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

对于您的用例:

A.replaceWith(span);

Mozilla Docs

Supported Browsers - 2019年4月90%


3
投票

这个问题很老了,但我发现自己正在学习微软认证,并且在研究书中建议使用:

oldElement.replaceNode(newElement)

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

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


0
投票

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

0
投票

我有一个类似的问题,并找到了这个线程。替换对我来说不起作用,并且由父母去找我的情况很困难。内部Html取代了孩子,这也不是我想要的。使用outerHTML完成了工作。希望这有助于其他人!

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

0
投票

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

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);
© www.soinside.com 2019 - 2024. All rights reserved.