jQuery Tutorial

jQuery DOM insertion - wrapAll method

wrapAll method

wrapAll() method is used to insert (wrap) an HTML structure around all elements in the set of matched HTML elements.

.wrapAll(HTMLElements)

HTMLElements type can be any one of selector, element, HTML string, or jQuery object specifying the HTML structure to wrap around all the matched HTML elements.

If selector matching more than one element or jQuery object is the collection, then the first element will be used.

Insert HTML Structure Around All Matching Elements

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
         $(".codingpointer").wrapAll("<div class='wrapper'></div>");
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
  </div>
   </body>
</html>

HTML document structure is updated as below once wrapAll method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
         $(".codingpointer").wrap("<div class='wrapper'></div>");
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>
     <div class='wrapper'>
        <div class="codingpointer">jQuery1</div>
       <div class="codingpointer">jQuery2</div>
     </div>
  </div>
   </body>
</html>

Output:

Test Section

jQuery1

jQuery2

wrapAll method with custom function parameter

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll(function(index) {
  			return "<div class='wrapper" + (index+1) + "'></div>";
		});
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
  </div>
   </body>
</html>

HTML document structure is updated as below once wrapAll method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll(function(index) {
  			return "<div class='wrapper" + (index+1) + "'></div>";
		});
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>
   <div class='wrapper1'>
     <div class="codingpointer">jQuery1</div>
   </div>
   <div class='wrapper2'>
     <div class="codingpointer">jQuery2</div>
   </div>
  </div>
   </body>
</html>

Output:

Test Section

jQuery1

jQuery2

wrapAll method around double div elements

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
.inner {
    background: green;
    padding: 10px;
    margin:4px;
}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll($('.wrapper'));
        });
      </script>		
   </head>	
   <body>
<div class='wrapper'><div class='inner'></div></div>
   <div>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
  </div>
   </body>
</html>

HTML document structure is updated as below once wrapAll method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
 .inner{
    background: green;
    padding: 10px;
    margin:4px;
}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll($('.wrapper'));
        });
      </script>		
   </head>	
   <body>
<div class='wrapper'><div class='inner'></div></div>
   <div>
<div class='wrapper'><div class='inner'>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
</div></div>
  </div>
   </body>
</html>

Output:

jQuery1

jQuery2

wrapAll method - Matching HTML Elements in different scopes

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
.inner {
    background: green;
    padding: 10px;
    margin:4px;
}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll($('.wrapper'));
        });
      </script>		
   </head>	
   <body>
<div class='wrapper'><div class='inner></div></div>
   <div>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
  </div>
<div>
<div class="codingpointer">jQuery3</div></div>
   </body>
</html>

HTML document structure is updated as below once wrapAll method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
.inner {
    background: green;
    padding: 10px;
    margin:4px;
}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	
        $(document).ready(function(){
		$( ".codingpointer" ).wrapAll($('.wrapper'));
        });
      </script>		
   </head>	
   <body>
<div class='wrapper'><div class='inner></div></div>
   <div>
     <div class="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
     <div class="codingpointer">jQuery3</div>
  </div>
<div>
</div>
   </body>
</html>

Output:

jQuery1

jQuery2

jQuery3

« Previous Next »

jQuery Programming Examples