1The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. A copy of this structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.
2
3Consider the following HTML:
4
5<div class="container">
6 <div class="inner">Hello</div>
7 <div class="inner">Goodbye</div>
8</div>
9Using .wrap(), we can insert an HTML structure around the inner <div> elements like so:
10
11$( ".inner" ).wrap( "<div class='new'></div>" );
12The new <div> element is created on the fly and added to the DOM. The result is a new <div> wrapped around each matched element:
13
14<div class="container">
15 <div class="new">
16 <div class="inner">Hello</div>
17 </div>
18 <div class="new">
19 <div class="inner">Goodbye</div>
20 </div>
21</div>
22The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:
23
24$( ".inner" ).wrap(function() {
25 return "<div class='" + $( this ).text() + "'></div>";
26});
27This will cause each <div> to have a class corresponding to the text it wraps:
28
29<div class="container">
30 <div class="Hello">
31 <div class="inner">Hello</div>
32 </div>
33 <div class="Goodbye">
34 <div class="inner">Goodbye</div>
35 </div>
36</div>