jQuery Wrap Method

In the previous paragraph, we inserted child elements into an already existing element. But we can also create a new element and wrap existing ones in it. To do this, use the method wrap()and similar methods wrapAll()and wrapInner(). For example, we may need to wrap some elements in a new div. To do this, we resort to the above methods.

wrap method

The wrap method wraps the elements of the selection with the element that is passed as an argument to this method. It has the following use cases:

• wrap(‘html markup’): wraps the selection elements in an element created from html markup
• wrap(element): wraps the selection elements in an html element passed as a parameter
• wrap(‘selector’): wraps the selection elements in the document element that matches the selector
• wrap(jQuery): wraps the selection elements in a jQuery object
• wrap(function): wraps the elements of the selection in an object returned by the function

Let’s say we have the following markup:

<ul class="langs">
    <li>Java</li>
    <li>C/C++</li>
    <li>PHP</li>
</ul>

Let’s wrap the list using the wrap method:

  $('.langs').wrap('<div class="redStyle"></div>');
  

The markup will then look like this:

<div class="redStyle">
<ul class="langs">
    <li>Java</li>
    <li>C/C++</li>
    <li>PHP</li>
</ul>
</div>

Similarly, we can use other ways to use the wrap method:

  var header = document.getElementById('header');
    $('.langs').wrap(header);
    

Note that in this case, the list is not inserted into an existing element, but simply an existing element is cloned, and the list is wrapped in this copy.

wrapAll method

The . method is used to wrap all elements of the selection as a single whole into a single element wrapAll. It has similar use cases:

• wrapAll(‘html markup’): wraps all selection elements in a single element generated from html markup
• wrapAll(element): wraps all selection elements in a single html element passed as a parameter
• wrapAll(‘selector’): wraps all elements of the selection into a single element that matches the selector
• wrapAll(jQuery): wraps all selection elements in a single jQuery object

For example, there is the following markup:

<div class="lang">Java</div>
<div class="lang">C/C++</div>
<div class="lang">PHP</div>

Let’s wrap all these elements in one div element:

$('.lang').wrapAll('<div class="langs"></div>');

The markup will then look like this:

<div class="langs">
    <div class="lang">Java</div>
    <div class="lang">C/C++</div>
    <div class="lang">PHP</div>
</div>

wrapInner method

The method is used to wrap the contents of elements into a new element wrapInner. It has the following use cases:

• wrapInner(‘html markup’): wraps the content of the selection elements in an element created from html markup
• wrapInner(element): wraps the content of the selection elements in the html element passed as a parameter
• wrapInner(‘selector’): wraps the content of the selection elements in the document element that matches the selector
• wrapInner(jQuery): wraps the content of the selection elements in a jQuery object
• wrapInner(function): wraps the contents of the selection elements in an object returned by the function

The original markup will look like this:

<ul>
<li class="lang">Java</li>
<li class="lang">C/C++</li>
<li class="lang">PHP</li>
</ul>

Let’s wrap the contents of the list elements in tags:

  $('li.lang').wrapInner('<p></p>');
  

The final markup will look like this:

<ul>
    <li class="lang"><p>Java</p></li>
    <li class="lang"><p>C/C++</p></li>
    <li class="lang"><p>PHP</p></li>
</ul>