jQuery Tutorial

jQuery DOM insertion - wrap method

wrap method

wrap() method is used to insert (wrap) an HTML structure around each html element in the set of matched html elements.

.wrap(HTMLElements)

HTMLElements type can be any one of selector, element, HTML string, or jQuery object specifying the HTML structure to wrap around the matched 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 Element

<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="codingpointer">jQuery1</div>
     <div class="codingpointer">jQuery2</div>
  </div>
   </body>
</html>

HTML document structure is updated as below once wrap 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>
     <div class='wrapper'>
       <div class="codingpointer">jQuery2</div>
     </div>
  </div>
   </body>
</html>

Output:

Test Section

jQuery1

jQuery2

wrap 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" ).wrap(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 wrap 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(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

wrap 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" ).wrap($('.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 wrap 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" ).wrap($('.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></div>
<div class='wrapper'><div class='inner'>
     <div class="codingpointer">jQuery2</div>
</div></div>
  </div>
   </body>
</html>

Output:

jQuery1

jQuery2

« Previous Next »

jQuery Programming Examples