jQuery Tutorial

jQuery DOM insertion - wrapInner method

wrapInner method

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

.wrapInner(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 HTML Element Contents

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .inner{
         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").wrapInner("<div class='inner'></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 wrapInner method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .codingpointer {
border: 2px solid green;
       }
      .inner{
         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").wrapInner("<div class='inner'></div>");
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>
     
     <div class="codingpointer"><div class='inner'>jQuery1</div> </div>
     <div class="codingpointer"><div class='inner'>jQuery2</div> </div>
  </div>
   </body>
</html>

Output:

Test Section

jQuery1

jQuery2

wrapInner method with custom function parameter

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .inner{
         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='inner" + (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 wrapInner method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .inner{
         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" ).wrapInner(function(index) {
  			return "<div class='inner" + (index+1) + "'></div>";
		});
        });
      </script>		
   </head>	
   <body>
   <p>Test Section</p>
   <div>

   <div class="codingpointer">
     <div class='inner1'>jQuery1
     </div>
   </div>
   <div class="codingpointer">
     <div class='inner2'>jQuery1
     </div>
   </div>
  </div>
   </body>
</html>

Output:

Test Section

jQuery1

jQuery2

wrapInner method around HTML Element contents with double div elements

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    padding: 10px;
    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" ).wrapInner($('.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 wrapInner method is executed.

<html>
   <head>
      <title>The jQuery Example</title>
      <style>
      .wrapper {
         border: 2px solid blue;
       }
.codingpointer   {
    background: yellow;
    padding: 10px;
    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" ).wrapInnner($('.wrapper'));
        });
      </script>		
   </head>	
   <body>
<div class='wrapper'><div class='inner'></div></div>
   <div>

     <div class="codingpointer">
       <div class='wrapper'><div class='inner'>jQuery1</div></div>
     </div>
     <div class="codingpointer">
       <div class='wrapper'><div class='inner'>jQuery2</div></div>
     </div>
  </div>
   </body>
</html>

Output:

jQuery1

jQuery2

« Previous Next »

jQuery Programming Examples