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:
