Skip to main content

Using replaceChild in JavaScript DOM (Live Playground)

In this tutorial, we will learn how to use the replaceChild method in JavaScript to replace existing HTML elements in the DOM. We'll cover the basics of the replaceChild method and provide sample code with explanations.

What is replaceChild?​

The replaceChild method is a built-in JavaScript DOM method that allows you to replace an existing HTML element in the DOM with a new one. You can use the replaceChild method to create dynamic web pages by updating content in the DOM as needed.

Sample Code: Using replaceChild​

Let's say we have the following HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>replaceChild Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>
  </body>
</html>

To use replaceChild to replace an HTML element in the DOM, you'll need to include a JavaScript <script> tag in your HTML document. For this example, we will add an inline script, although it's generally recommended to use external JavaScript files for larger projects.

Here's how you can replace the p element with the ID firstParagraph with a new p element:

<!DOCTYPE html>
<html>
  <head>
    <title>replaceChild Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>

    <script>
      // Select the element with the ID "mainContainer" and "firstParagraph"
      var mainContainer = document.getElementById('mainContainer');
      var firstParagraph = document.getElementById('firstParagraph');

      // Create a new paragraph element
      var newParagraph = document.createElement('p');

      // Set the paragraph's attributes and text content
      newParagraph.textContent = 'This is a new paragraph.';
      newParagraph.setAttribute('id', 'newParagraph');
      newParagraph.setAttribute('class', 'newParagraphClass');

      // Replace the first paragraph element with the new paragraph using replaceChild
      mainContainer.replaceChild(newParagraph, firstParagraph);
    </script>
  </body>
</html>

After running this code, the p element with the ID firstParagraph will be replaced by a new p element with the ID newParagraph and the class newParagraphClass.

Live Playground, Try it Yourself

Conclusion​

The replaceChild method is a valuable tool for replacing HTML elements in the DOM, allowing you to create dynamic and responsive web pages. By mastering this method, you can create interactive and engaging web experiences that update and adapt to user input and changing content needs.