Languages
[Edit]
EN

JavaScript - replace existing HTML element

3 points
Created by:
ArcadeParade
546

In this article, we would like to show you how to replace existing HTML element using replaceChild() method in JavaScript.

Quick solution:

var oldElement = document.querySelector("#element");

var newElement = document.createElement("div");
newElement.innerText = 'This is new element...';

oldElement.parentNode.replaceChild(newElement, oldElement);

 

Practical examples

Example 1

In this example, we will replace the element with a new div element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="element">This is old element...</div>
  <script>

    var oldElement = document.querySelector("#element");

    var newElement = document.createElement("div");
    newElement.innerText = 'This is new element...';

    oldElement.parentNode.replaceChild(newElement, oldElement);

  </script>
</body>
</html>

Example 2

In this example, we will replace child-2 element with a new paragraph element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="parent">
    <p id="child-1">This is a paragraph 1.</p>
    <p id="child-2">This is a paragraph 2.</p>
  </div>
  <script>

    var parent = document.querySelector("#parent");
    var child = document.querySelector("#child-2");

    var paragraph = document.createElement("p");
    paragraph.innerText = 'This is new paragraph.';

    parent.replaceChild(paragraph, child);

  </script>
</body>
</html>

Alternative titles

  1. JavaScript - replaceChild() method example
  2. JavaScript - replace node
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript - DOM Node - problems & solutions

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join