So the same HTML in the previous example is transformed by:

$("div").wrap("<p>");

into:

<p>
 <div>
     <div></div>
     <div></div>
  </div>
</p>

You can see that now that all of the divs are wrapped by a single <p>.

WrapAll is a difficult method to use. The reason is that what it does is slightly strange. It takes all of the elements in the result and removes them from the DOM, wraps them in the structure supplied and then inserts them at the position of the first element in the result. 

For example consider the DOM generated by:

<div>
 test0
</div>
<p>test1</p>
<div>
 <p>test2</p>
</div>

If you use:

$("div").wrapAll(‘<p class=”wrapper”>’);

the result is:

<p class="wrapper">
 <div>
   test0
   </div><div>
   <p>test2</p>
 </div>
</p>
<p>test1</p>

Notice that the paragraph <p>test1</p> has been left behind. All of the extracted divs have been removed, wrapped and inserted in place of the first div. 

There is one final variation on the wrap method, wrapInner. This works in much the same way, but wraps the content of each element in the results. As before, the content of an element can best be thought of as what you would find between the opening and closing tags.

If we use:

$("div").wrapinner(‘<p class=”wrapper”>’);

on the previous example DOM we get:

<div>
 <p class="wrapper">
   test0
 </p>
</div>
<p>test1</p>
<div>
 <p class="wrapper">
   <p>test2</p>
 </p>
</div>

You can see that what is between the div tags has indeed been wrapped by the paragraph object.

Unwrap

Although not really the same as the other wrap methods, it is worth introducing the unwrap method here as it is close to being the inverse of wrap.

The simple unwrap() method will remove the parents of each element in the results. For example:

$("div").unwrap();

will remove the parent of each div in the results list.

You can also specify a selector. For example:

$("div").unwrap("p");

will only remove the parent of the div if it is a paragraph. 

You can see that using an unwrap followed by a wrap you can change the wrapper. For example, given:

<div>
 <button>test1</button>
</div>
<span>
 <button>test2</button>
</span>
<div>
 <button>test3</button>
</div>

To replace all of the divs wrapping the button tags with h1 tags you could use:

$("button").unwrap("div").wrap("<h1>");

Notice, however, that the result is:

<h1>
 <button>test1</button>
</h1>
<span>
 <h1>
  <button>test2</button>
 </h1>
</span>
<h1>
 <button>test3</button>
</h1>

which is as promised, but perhaps not what everyone would have expected. Notice that the button that was wrapped by a span has also been wrapped by an h1. That is, all of the buttons have been wrapped by h1, irrespective of whether they were previously wrapped by a div that has been removed. Obvious yes, but unwrap plus wrap doesn't give you a way to replace one wrapper with another unless all of the DOM structures concerned are wrapped by the same type of element or you unwrap without selecting.

That is: 

$("button").unwrap().wrap("<h1>");

produces:

<h1>
 <button>test1</button>
</h1>
<h1>
 <button>test2</button>
</h1>
<h1>
 <button>test3</button>
</h1>

and in this case the wrappers have been changed from whatever they were to h1.