How to replace HTML element in jQuery ? - GeeksforGeeks

22 Apr, 2021
We can replace HTML elements using the jQuery .replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.
The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.
Syntax :
replaceWith( newContent )
.replaceWith( function )
Return Value: This method returns the selected element with the change.
Note: The jQuery .replaceWith() method, returns the jQuery object so that the other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.
Example 1: We fetch the element we need to replace and write a new element in place of it.
HTML
<!DOCTYPE html><html>    <head>        <script            src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>        <script>            $(document).ready(function(){                $("button").click(function(){                    $("p").replaceWith                    ("<div style='width:200px;height:100px;\                    background-color:red;text-align:center;\                    vertical-align:middle;display:table-cell'>\                    <strong>new div</strong></div>");                });            });        </script>    </head>    <body>           <p>Example paragraph.</p>        <button style="margin: 20px 0px;">        click to replace       </button>    </body></html>
Output :
Example 2: We can also replace an HTML element with another existing HTML element.
XML
<!DOCTYPE html><html>    <head>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>        <script>            $(document).ready(function(){                $("button").click(function(){                    $("p").replaceWith($("h1"))                });            });        </script>    </head>    <body>           <p>Example paragraph.</p>        <button style="margin: 20px 0px;">        click to replace       </button>        <h1>H1 tag</h1>    </body></html>
Output :
Example 3: We can replace multiple HTML elements at the same time.
HTML
<!DOCTYPE html><html>    <head>        <script             src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">        </script>        <script>            $(document).ready(function(){                $("button").click(function(){                    $(".X").replaceWith("<h3>new element</h3>")                });            });        </script>    </head>    <body>         <p class="X">Example paragraph.</p>        <h1 class="X">Example H1</h1>      <div          style="width: fit-content;                background-color: green;                padding: 10px;" class="X">         Example div      </div>      <button style="margin: 20px 0px;">         click to replace       </button>    </body></html>
Output :
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?