How to replace an HTML element with another one 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 an HTML element with another one using JavaScript?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to replace the entire HTML node using JavaScript ?

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 HTM

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 replace line breaks with br tag using JavaScript ?

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. [GFGTABS] JavaScript let s1 = "Hello\nWorl

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 Get the Entire HTML Document as a String Using JavaScript?

We will explore how to retrieve the entire HTML document as a string using JavaScript. This can be useful when you want to inspect or manipulate the entire structure of a webpage. Methods to Get the Entire HTML Document as a StringThere are two primary methods for extracting the HTML content of a pa

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() wi

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

How to convert speech into text using JavaScript ?

In this article, we will learn to convert speech into text using HTML and JavaScript. Approach: We added a content editable "div" by which we make any HTML element editable. C/C++ Code <divÂ class="words"Â contenteditable> Â Â Â Â <pÂ id="p"></p> </div> We use th