How to replace an HTML element with another one using JavaScript ?

Last Updated : 12 Apr, 2023

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> 