Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

    Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

    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 :