Skip to content
Related Articles

Related Articles

Replace a DOM element with another DOM element in place
  • Last Updated : 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.

  • 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;"
            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:
    Supported browser

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :