[Edit]

JavaScript - replace child element

1 contributors

2 contributions

0 discussions

0 points

Created by:

christa

600

In this article, we would like to show you how to replace a child element using JavaScript.

Quick solution:

xxxxxxxxxx
 
parentNode.replaceChild(newChild, oldChild);

Practical example

Edit

In this example, we present how to use replaceChild() method to replace oldChild of the parentNode with a newChild.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div id="container">
    <div id="child-element">Example text...</div>
  </div>
  <script>
​
    // get handle to element to replace
    var oldChild = document.querySelector('#child-element');
    
    // create new element
    var newChild = document.createElement('div');
    newChild.textContent = 'new child text...';
    
    // get handle to the parent node
    var parentNode = oldChild.parentNode;
    
    parentNode.replaceChild(newChild, oldChild);
​
  </script>
</body>
</html>