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>