jQuery wrap Method wraps specified HTML element(s) around each element in the set of matched elements.
This wrapping process is very useful for injecting any additional structure into a document, without destroying the original semantic qualities of the document.
Possible values are:
- HTML elements
- jQuery objects
- DOM elements
This is the simple syntax to use this method.
selector.wrap( html )
Parameters
elem – A string of HTML which will be created on the fly and wrapped around each target.
Following is a simple example with a simple usage of this method.
<div class="main"> <div class="sub">John Doe</div> <div class="sub">Jane Doe</div> </div>
Read Also:
- jQuery unwrap() – Remove wrapping div
- jQuery wrapAll – wrap all elements
- jQuery wrapInner – wrap element around the content
Now, .wrap() can insert an HTML structure around the each inner <div> elements as below:
$( ".sub" ).wrap( "<div class='wrap'></div>" );
The result will be:
<div class="main"> <div class="wrap"><div class="sub">John Doe</div></div> <div class="wrap"><div class="sub">Jane Doe</div></div> </div>
For more information go to jQuery references.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.