Teach with us

How does jQuery replaceWith() method work?

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.

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

  • content − Content to replace the matched elements with.

Example

You can try to run the following code to learn how to work with replaceWith() method:

Live Demo

<html>

   <head>
      <title>jQuery replaceWith() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(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>
Updated on 17-Dec-2019 07:25:35

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements