How to replace HTML element in jQuery ?

Last Updated : 24 Sep, 2024

Replacing an HTML element in jQuery involves selecting an existing element on a webpage and replacing it with new content or another element. This process can be easily managed with jQuery methods like .replaceWith() or .html(), enabling dynamic and flexible content updates.

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: In this example we use jQuery to replace a paragraph with a styled <div> when the button is clicked. The replacement happens dynamically using the replaceWith() method, altering the content.

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: In this example we use jQuery to replace a paragraph (<p>) with an <h1> tag when the button is clicked. The replacement is done dynamically using the replaceWith() method in jQuery.

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: In this example we use jQuery to replace all elements with the class X (paragraph, heading, and div) with an <h3> element containing "new element" when the button is clicked.

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>