jQuery Tutorial
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.
<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
jQuery1jQuery2
<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
jQuery1jQuery2
<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:
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page