I am looking to replace an element in the DOM.
For example, there is an <a> element that I want to replace with a <span> instead.

How would I go and do that?

标签： javascript dom

5条回答

刘海飞了

2楼-- · 2019-01-02 20:45

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

a is the replaced A element.

0人赞添加讨论(0) 举报

看淡一切

3楼-- · 2019-01-02 20:52

This question is very old, but I found myself studying for a Microsoft Certification, and in the study book it was suggested to use:

oldElement.replaceNode(newElement)

I looked it up and it seems to only be supported in IE. Doh..

I thought I'd just add it here as a funny side note ;)

0人赞添加讨论(0) 举报

高级女魔头

4楼-- · 2019-01-02 20:58

`A.replaceWith(span)` - No parent needed

Generic form:

target.replaceWith(element);

Way better/cleaner than the previous method.

For your use case:

A.replaceWith(span);

Mozilla Docs

Supported Browsers - 86% Nov 2018

0人赞添加讨论(0) 举报

几人难应

5楼-- · 2019-01-02 21:11

by using 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>

0人赞添加讨论(0) 举报

与风俱净

6楼-- · 2019-01-02 21:12

Example for replacing LI elements

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人赞添加讨论(0) 举报

How to replace DOM element in place using Javascri

A.replaceWith(span) - No parent needed

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

`A.replaceWith(span)` - No parent needed