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  lt a gt  element that I want to replace with a  lt span gt  instead   How would I go and do that

User · Answer

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   gt      const replacement   document createElement  span           copy attributes   for  let i   0  i  lt  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   gt  replacement appendChild node      link replaceWith replacement      If you have these elements   lt a href  quot  link-1 quot  gt Link 1 lt  a gt   lt a href  quot  link-2 quot  gt Link 2 lt  a gt   lt a href  quot  link-3 quot  gt Link 3 lt  a gt   lt a href  quot  link-4 quot  gt Link 4 lt  a gt   After running above codes  you will end up with these elements   lt span href  quot  link-1 quot  gt Link 1 lt  span gt   lt span href  quot  link-2 quot  gt Link 2 lt  span gt   lt span href  quot  link-3 quot  gt Link 3 lt  span gt   lt span href  quot  link-4 quot  gt Link 4 lt  span gt

User · Answer

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

User · Answer

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

User · Answer

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    lt div gt hello lt  div gt  newElem    lt span gt Goodbye lt  span gt  currEl outerHTML   newElem   currEl    lt span gt Goodbye lt  span gt

User · Answer

var a   A parentNode replaceChild document createElement  span    A     a is the replaced A element

User · Answer

by using replaceChild      lt html gt   lt head gt   lt  head gt   lt body gt     lt div gt       lt a id  myAnchor  href  http   www stackoverflow com  gt StackOverflow lt  a gt     lt  div gt   lt script type  text JavaScript  gt    var myAnchor   document getElementById  myAnchor      var mySpan   document createElement  span      mySpan innerHTML    replaced anchor      myAnchor parentNode replaceChild mySpan  myAnchor    lt  script gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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   quot foo quot           child1  span   quot foo quot   child3   const list     quot bar quot   span  target replaceWith    list   quot fizz quot        child1   quot bar quot   span   quot fizz quot   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 - 94  Apr 2020

[javascript] How to replace DOM element in place using Javascript?

Examples related to javascript

Examples related to dom