jQuery replaceWith() Method

Last Updated : 24 Sep, 2024

The jQuery replaceWith() method replaces the selected HTML element(s) with new content or elements. It removes the existing element from the DOM and inserts the specified content in its place, allowing dynamic updates to webpage structure and content.

Syntax:

$(selector).replaceWith(content, function)

Parameters:

This method accepts two parameters as mentioned above and described below:

content: It is required parameter which is used to specify the content need to replace.
para2: It is an optional parameter which perform after calling.

Return Value: This method returns the selected element with the change. Below codes illustrate the replaceWith() method in jQuery:

Example 1: In this example we use jQuery's replaceWith() method to replace each button with a <div> containing the button's text when clicked. The new <div> inherits the button's content dynamically.

HTML

<!DOCTYPE html> <html>  <head>     <title>The replaceWith method</title>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>     <style>         button {             display: block;             margin: 10px;             color: red;             width: 200px;             padding: 3px;         }          div {             color: green;             border: 2px solid green;             width: 200px;             margin: 3px;             padding: 5px;             font-size: 20px;             text-align: center;         }     </style> </head>  <body>     <!-- click on individual button and see the change -->     <button>Geeks</button>     <button>for</button>     <button>Geeks</button>      <!-- jQuery code to show the working of this method -->     <script>         $("button").click(function () {             $(this).replaceWith("<div>" + $(this).text() + "</div>");         });     </script> </body>  </html>

Output:

file — jQuery replaceWith() Method Example Output

Example 2: In this example jQuery's replaceWith() method to replace a paragraph's content with the string "GeeksforGeeks!" when the button is clicked. An alert prompts before the content replacement.

HTML

<!DOCTYPE html> <html>  <head>     <title>The replaceWith method</title>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>     <style>         button {             display: block;             margin: 4px;             color: green;             width: 150px;             padding: 5px;         }          div {             width: 200px;             height: 100px;             padding: 20px;             border: 2px solid green;         }     </style> </head>  <body>     <div>         <p>Welcome to </p>          <!-- click on this button and see the change -->         <button>Click Here!</button>     </div>      <!-- jQuery code to show the working of this method -->     <script>         let x = "GeeksforGeeks!";         $("button").click(function () {             $("p").replaceWith(x).replaceWith(function (n) {                 alert("Click ok and string will replace");                 return n;             });         });     </script> </body>  </html>