Replace a DOM element with another DOM element in place

0 0 2 minutes read

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;">  
            zambiatek  
        </h1> 
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
    </p> 
    <div> 
        <a id="a" href="#">zambiatek</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;">  
            zambiatek  
        </h1> 
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
    </p> 
    <div> 
        <a id="a" 
            href="https://www.zambiatek.com">zambiatek</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.zambiatek.com"; 
            aEl.parentNode.replaceChild(newEl, aEl); 
            el_down.innerHTML =  
       "<a> element is replaced by the new <a> element."; 
        } 
    </script> 
</body> 
  
</html> 