How to Replace the Entire HTML Node using JavaScript?

How to Replace the Entire HTML Node using JavaScript?

Last Updated : 15 Oct, 2024

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

How to Replace the Entire HTML Node using JavaScript?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to replace an HTML element with another one using JavaScript?

Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st

How to remove an HTML element using JavaScript ?

Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions

How to get the text without HTML element using JavaScript ?

Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below: Using innerText propertyUsing textContent property Using innerText property: We can use innerTex

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to return HTML or build HTML using JavaScript ?

JavaScript is very powerful and with it, we can build dynamic web content and add many features to a web application. Â With HTML, we create the structure of the web page and the same thing can also be done with JavaScript.Â There are a few JavaScript methods called as createElement(), appendChild()

How to remove HTML tags from a string using JavaScript ?

Removing HTML tags from a string in JavaScript means stripping out the markup elements, leaving only the plain text content. This is typically done to sanitize user input or to extract readable text from HTML code, ensuring no unwanted tags remain in the string.HTML tags come in two forms: opening t

How to get the child element of a parent using JavaScript ?

Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. Below are the approaches to get the child element of a parent using JavaScript:Table of ContentBy using the children propertyBy using the querySelector

How to replace all dots in a string using JavaScript ?

We will replace all dots in a string using JavaScript. There are multiple approaches to manipulating a string in JavaScript. Table of Content Using JavaScript replace() MethodUsing JavaScript Split() and Join() Method Using JavaSccript reduce() Method and spread operatorUsing JavaScript replaceAll()

How to remove the table row in a table using JavaScript ?

Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload. This can be done in two ways: Table of Content JavaScript remove() Me

JavaScript - How to Replace Line Breaks With 'br' Tag?

Here are the different methods to replace line breaks with <br> tag in JavaScript.1. Using replace() with Regular ExpressionThe regular expression /\n/g matches all occurrences of line breaks in the string. The g flag ensures global replacement.JavaScriptlet s1 = "Hello\nWorld!\nWelcome to Jav