Replace a DOM element with another DOM element in place - GeeksforGeeks

16 Feb, 2021
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.
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.
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;">             GeeksforGeeks         </h1>    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">    </p>    <div>        <a id="a" href="#">GeeksforGeeks</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;">             GeeksforGeeks         </h1>    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">    </p>    <div>        <a id="a"             href="https://www.geeksforgeeks.org">GeeksforGeeks</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:
Google Chrome
Mozilla Firefox
Internet Explorer
Safari
Opera
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
arorakashish0911
HTML-DOM
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
How to append HTML code to a div using JavaScript ?
File uploading in React.js
Hide or show elements in HTML using display property
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request