What is the difference between jQuery.replaceAll() and jQuery.replaceWith() methods in jQuery?

jQueryWeb DevelopmentFront End Technology

jQuery.replaceAll()

The replaceAll( selector ) method replaces the elements matched by the specified selector with the matched elements.

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

  • selector − The elements to find and replace the matched elements with.

Example

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

Live Demo

<html>

   <head>
      <title>jQuery replaceAll() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("div").click(function () {
               $('<div class = "div"></div>').replaceAll( this );
            });
         });
      </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>

jQuery.replaceWith()

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 jQuery.replaceWith() method:

Live Demo

<html>

   <head>
      <title>jQuery replaceWith() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>
raja
Published on 19-Dec-2017 11:22:12
Advertisements