Skip to content
Related Articles

Related Articles

Improve Article
How to replace an HTML element with another one using JavaScript ?
  • Difficulty Level : Medium
  • Last Updated : 18 Nov, 2020

Document Object Model (DOM) is a platform and language-neutral interface which is used by programs and scripts to dynamically access the content, style and structure. Please refer to DOM (Document Object Model) to know the details. We can implement this by using DOM’s createElement(), createTextNode(), appendChild(), replaceChild() methods and childNodes property.

Let us discuss these methods and property to replace one HTML element to another.

  • createElement(): It is used to create an element node with the specified name.
    Syntax:
    var element = document.createElement("Element_name"); 
    

    In this example, the element is “h1” tag, so write

     var element=document.createElement("h1");



  • createTextNode(): The method is used to create a text node.
    Syntax:
     var txt = document.createTextNode("Some_Text");
  • appendChild(): After creating text node, we have to append it to the element by using appendChild() method.

    Syntax:

     element.appendChild(Node_To_append);

The following shows the working code on how to use these methods and property discussed above.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>
        Using DOM'S to print Hello World 
    </h2>
      
    <script>
        var h = document.createElement("h3");
  
        var txt = document
            .createTextNode("Hello World!!");
          
        h.appendChild(txt);
          
        document.body.appendChild(h);
    </script>
</body>
  
</html>

Output:

  • Before Clicking the Button:
  • After Clicking the Button:

childNodes[Position]: This property returns a collection of child nodes as a NodeList object. The nodes are sorted as they appear in source code and can be accessed by index number starting from 0.

replaceChild(): It replace a child node with new node.

old_Node.replaceChild(new_Node, old_node.childNodes[node_position]);

Example: The following code shows how to replace element with another one.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div id="p1">
        <p id="red">Hello World </p>
  
        <!-- We are going to replace Hello World!! 
            in "p" tag with "Hello Geeks" in "h2" 
            tag-->
        <button onclick="repFun()">
            Click Me
        </button>
    </div>
  
    <p id="demo"></p>
      
    <script>
        function repFun() {
  
            // Creating "h2" element
            var H = document.createElement("h2");
  
            // Retaining id  
            H.setAttribute("id", "red");
  
            // Creating Text node        
            var txt = document.createTextNode("Hello Geeks!!");
  
            // Accessing  the Element we want to replace 
            var repNode = document.getElementById("p1");
              
            // Appending Text Node in Element  
            H.appendChild(txt);
  
            // Replacing one element with another
            p1.replaceChild(H, p1.childNodes[0]);
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the Button:
  • After clicking the Button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :