How to replace DOM element in place using Javascript?

Question

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?

target.replaceWith(element); is the modern (ES5+) way to do this — Gibolt
– Gibolt, Commented Nov 11, 2016 at 7:44
@Gibolt What does DOM spec have with ES? Moreover, it's not yet a part of the DOM standard, while ES5 was released 9 years ago. — pishpish
– pishpish, Commented Jan 7, 2018 at 13:30
ES5+ means ES5 OR LATER. Even if ES5 is 9 years old, later versions are NOT that old. — JustinCB
– JustinCB, Commented Jun 29, 2018 at 13:40
If you still use StackOverflow it's worth picking the new standard answer below. — mikemaccana
– mikemaccana, Commented Aug 29, 2018 at 18:46

steal3rd · Accepted Answer · 2018-09-25 21:46:00Z

231

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>

edited Sep 25, 2018 at 21:46

steal3rd

10810 bronze badges

answered May 9, 2009 at 17:15

Bjorn

72.4k40 gold badges140 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KooiInc Over a year ago

this example wouldn't work. You should put the script block at the end of the body to make it work. Furthermore, just for fun: try adding the line [alert(myAnchor.innerHTML)] after the operation.

rahul Over a year ago

Theres a spelling mistake with StackOverflow in the anchor innerText

lisak Over a year ago

what if it is root html element

JDelage Over a year ago

Thank you @Bjorn Tipling. I've created a follow up question on how to add an id and a function to the replaced element, here: stackoverflow.com/questions/15670261/…

Gibolt · Accepted Answer · 2022-11-07 02:44:12Z

157

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

Advanced usage

You can pass multiple values (or use spread operator ...).
Any string value will be added as a text element.

Examples:

// 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]

Safely handling `null` target

If your target has a chance to be null, you can consider using the newish ?. optional chaining operator. Nothing will happen if target doesn't exist. Read more here.

target?.replaceWith?.(element)

Related DOM methods

Read More - child.before and child.after
Read More - parent.prepend and parent.append

Mozilla Docs

Supported Browsers - 97% Nov '22

edited Nov 7, 2022 at 2:44

answered Nov 5, 2016 at 23:18

Gibolt

47.9k15 gold badges208 silver badges133 bronze badges

12 Comments

jor Over a year ago

Not supported in IE11 or Edge 14 (now: 2016-11-16).

Gibolt Over a year ago

Try using Google's Closure or another transpiler to convert to ES5. You shouldn't be writing old code based on browser support, if you have a better, more maintainable option

cdmckay Over a year ago

I think if the choice is between use code that works on all browsers I'm trying to support, or re-tool your whole build process to use Closure, I would pick use code that works on all browsers that I'm trying to support.

Tabernero Over a year ago

@jor I kinda agree to support as many browsers as possible, but I refuse to remade my code just because IE or Edge are incomplete or just "want to be different". There are standards, if they don't follow them and a few people support it, that is their problem, that don't have to affect us as web developers.

Gibolt Over a year ago

Global support is now at 72%, 80% in U.S. as of Oct 2017

|

Kamarey · Accepted Answer · 2009-05-09 17:20:27Z

68

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

a is the replaced A element.

answered May 9, 2009 at 17:20

Kamarey

11.1k7 gold badges60 silver badges70 bronze badges

2 Comments

Pedro Ferreira Over a year ago

Answer from @Bjorn Tipling in fact does not work. This is the (correct!) answer for KooiInc, also correct, comment . Now it works! ;-) Tx to both!

quemeful Over a year ago

surely you could have come up with a variable name other than A lol

Zeliax · Accepted Answer · 2018-05-22 18:59:26Z

8

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

answered May 22, 2018 at 18:59

Zeliax

5,43513 gold badges57 silver badges79 bronze badges

Comments

Vitold · Accepted Answer · 2021-12-10 08:13:26Z

4

Best way to do it. No parents need. Just use Element.outerHTML = template;

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

answered Dec 10, 2021 at 8:13

Vitold

392 bronze badges

Comments

Sean · Accepted Answer · 2019-03-24 07:45:31Z

3

I had a similar issue and found this thread. Replace didn't work for me, and going by the parent was difficult for my situation. Inner Html replaced the children, which wasn't what I wanted either. Using outerHTML got the job done. Hope this helps someone else!

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

answered Mar 24, 2019 at 7:45

Sean

2,5393 gold badges26 silver badges33 bronze badges

2 Comments

Thanasis Over a year ago

This is very clever but I don't know if it complies to the standards. Thanks !

Thanasis Over a year ago

Probably it is globally used and I vote answer is the best !

Nurul Huda · Accepted Answer · 2020-07-24 05:58:56Z

3

You can replace an HTML Element or Node using Node.replaceWith(newNode).

This example should keep all attributes and childs from origin node:

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

If you have these elements:

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

After running above codes, you will end up with these elements:

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

edited Jul 24, 2020 at 5:58

answered May 2, 2020 at 0:31

Nurul Huda

1,60017 silver badges15 bronze badges

2 Comments

Page Notes Over a year ago

The answers given assume a static DOM. What if the DOM has been modified, e.g., via an onload script?

Nurul Huda Over a year ago

just make sure that the document.querySelectorAll('a') is executed after the DOM has been modified or generated.

T.J. Crowder · Accepted Answer · 2021-03-04 08:11:14Z

2

You can use replaceChild on the parent of the target element after creating your new element (createElement):

const newElement = document.createElement(/*...*/);
const target = document.getElementById("my-table");
target.parentNode.replaceChild(newElement, target);

If your starting point for the new element is HTML, you can use insertAdjacentHTML and then removeChild on the parent (or remove on the element itself, in modern environments):

const target = document.getElementById("my-table");
target.insertAdjacentHTML("afterend", theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`

answered Mar 4, 2021 at 8:11

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

klobastov · Accepted Answer · 2018-10-01 06:22:01Z

-1

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

answered Oct 1, 2018 at 6:22

klobastov

445 bronze badges

Comments

Squatter · Accepted Answer · 2019-05-26 22:48:10Z

-1

Given the already proposed options the easiest solution without finding a parent:

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

answered May 26, 2019 at 22:48

Squatter

1

Collectives™ on Stack Overflow

How to replace DOM element in place using Javascript?

10 Answers 10

4 Comments

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

Advanced usage

Safely handling `null` target

Related DOM methods

12 Comments

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

A.replaceWith(span) - No parent needed

Advanced usage

Safely handling null target

Related DOM methods

12 Comments

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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

Safely handling `null` target