The task is to replace an element by another element in place using JavaScript. Below are the few methods:
-
parentNode Property: This property returns the parent node of the defined node, as a Node object.
Syntax:node.parentNode
Return value:
It returns a node object, which represents the parent node of a node, or null if there is no parent. -
replaceChild() Method: This method replaces a child node with a new node. This new node can be an existing node in the document, or can be newly created.
Syntax:node.replaceChild(newNode, oldNode)
Parameters:
- newNode: This parameter is required. It specifies the node object to insert.
- oldNode: This parameter is required. It specifies the node object to remove.
Return value:
It returns a node object, which represents the replaced node.
Example 1: This example creates a new <span> element and replace it with the <a> element using parentNode property and replace() method.
<!DOCTYPE html> <html> <head> <title> JavaScript | Replace dom element in place. </title> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <div> <a id="a" href="#">neveropen</a> </div> <br> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var today = 'Click button to replace <a> element in DOM'; el_up.innerHTML = today; function gfg_Run() { var aEl = document.getElementById("a"); var newEl = document.createElement("span"); newEl.innerHTML = "replaced text!"; aEl.parentNode.replaceChild(newEl, aEl); el_down.innerHTML = "<a> element is replaced by the <span> element."; } </script> </body> </html> |
Output:
-
Before clicking the button:
-
After clicking the button:
Example 2: This example creates a new <a> element and replace it with the previous <a> element using parentNode property and replace() method keeping the href property same.
<!DOCTYPE html> <html> <head> <title> JavaScript | Replace dom element in place. </title> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> neveropen </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <div> <a id="a" </div> <br> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var today = 'Click button to replace <a> element in DOM'; el_up.innerHTML = today; function gfg_Run() { var aEl = document.getElementById("a"); var newEl = document.createElement("a"); newEl.innerHTML = "New GFG link!"; newEl.href = "https://www.geeksforgeeks.org"; aEl.parentNode.replaceChild(newEl, aEl); el_down.innerHTML = "<a> element is replaced by the new <a> element."; } </script> </body> </html> |
Output:
-
Before clicking the button:
-
After clicking the button:
- Supported browser
- Google Chrome
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera
