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

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");
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");
 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);
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:
HTML-Misc
JavaScript-Misc
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Design a web page using HTML and CSS
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?