How to Replace the Entire HTML Node using JavaScript?

Last Updated : 15 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To replace an entire HTML node using JavaScript, you can use methods that allow you to remove an existing node and insert a new one in its place.

Approach: Using replace() method

  • Take the new document as a form of string(eg.. Str = '< html > < /html > ').
  • Use .replace() method on the HTML element and replace it with the new HTML Document(eg.. $('html').html(Str)).

Example: This example implements the above approach.

html 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        Replace the entire HTML node using JavaScript.
    </title>
    <script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>

<body style="text-align:center;">
    <p id="GFG_UP">
    </p>
    <button onclick="GFG_Fun();">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        up.innerHTML = 
 "Click on the button to replace the entire HTML element.";

        function GFG_Fun() {
            let Str = 
'<!DOCTYPE HTML><html><head><title>Check if an element is a'+
' div in JavaScript.</title></head><body style = "text-align:center;">'+
'<h2 style = "color:green;">GeeksForGeeks</h2><p>This is replaced element.'+
                '</p></body>  </html>';
            $('html').html(Str);
        }
    </script>
</body>

</html>

Output:

out

Next Article
How to Replace the Entire HTML Node using JavaScript?

P
PranchalKatiyar
Improve
Article Tags :

Similar Reads