jQuery - replaceWith( content ) Method

Description

The replaceWith( content ) method replaces all matched elements with the specified HTML or DOM elements. This returns the JQuery element that was just replaced, which has been removed from the DOM.

Syntax

Here is the simple syntax to use this method −

selector.replaceWith( content )

Parameters

Here is the description of all the parameters used by this method −

content − Content to replace the matched elements with.

Example

Following is a simple example a simple showing the usage of this method. This replaces clicked one square by the a new division. Compare the syntax with replaceAll( selector ) method.

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith( ('<div class = "div"></div>') );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

This will produce following result −

jquery-dom.htm