Replace a DOM element with another DOM element in place

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:
    Supported browser

  • Google Chrome
  • Mozila Firefox
  • Internet Explorer
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.