Javatpoint Logo

91-9990449935

 0120-4256464

JavaTpoint

jQuery wrapAll()

jQuery wrapAll() method is used to wrap specified HTML elements around all selected elements, in a set of matched elements.

Syntax:

  1. $(selector).wrapAll(wrappingElement)   

Parameters of jQuery wrapAll() method

Parameter Description
wrappingElement It is a mandatory parameter. It specifies the HTML elements that you wrap around the selected elements. Its possible values are:
  • HTML elements
  • jQuery objects
  • DOM elements

Example of jQuery wrapAll() method

Let's take an example to demonstrate the jQuery wrapAll() method.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("button").click(function(){  
  8.         $("p").wrapAll("<div></div>");  
  9.     });  
  10. });  
  11. </script>  
  12. <style>  
  13. div{background-color: pink;}  
  14. </style>  
  15. </head>  
  16. <body>  
  17. <p>Hello Guys!</p>  
  18. <p>This is javatpoint.com</p>  
  19. <button>Wrap a div element around all p elements</button>  
  20. </body>  
  21. </html>  
Test it Now

jQuery wrapAll() example 2

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>The jQuery Example</title>  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
  6. <script type="text/javascript" language="javascript">  
  7.          $(document).ready(function() {  
  8.             $("div").click(function () {  
  9.                var content = "<div class='div'></div>";  
  10.                $("div").wrapAll( content );  
  11.             });  
  12.          });  
  13.       </script>  
  14. <style>  
  15. .div{ margin:5px;padding:2px; border:2px solid #666; width:60px;}  
  16. </style>  
  17. </head>  
  18. <body>  
  19. <p>Click on any square to wrap the squares into a new square:</p>  
  20. <div class="div" id="destination">We are going to wrap this text</div>  
  21. <div class="div" style="background-color:orange;">ONE</div>  
  22. <div class="div" style="background-color:yellow;">TWO</div>  
  23. <div class="div" style="background-color:green;">THREE</div>  
  24. </body>  
  25. </html>  
Test it Now

jQuery wrapAll() example 3

A wrapAll() example with unwrap button:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("#btn1").click(function(){  
  8.         $("p").wrapAll("<div></div>");  
  9.     });  
  10.     $("#btn2").click(function(){  
  11.         $("p").unwrap();  
  12.     });  
  13. });  
  14. </script>  
  15. <style>  
  16. div{background-color: pink;}  
  17. </style>  
  18. </head>  
  19. <body>  
  20. <p>Hello Guys!</p>  
  21. <p>This is javatpoint.com</p>  
  22. <button id="btn1">Wrap a div element around all p element</button>  
  23. <button id="btn2">Unwrap</button>  
  24. </body>  
  25. </html>  
Test it Now
Next TopicjQuery focus()