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
