jQuery wrapAll()

The wrapAll() method is a jQuery DOM manipulation method that wraps a group of selected elements with a specified HTML content or DOM element.

Syntax

The syntax for wrapAll() method is as follows:

$(selector).wrapAll(wrappingElement);

Where selector is the element you want to wrap, and wrappingElement is the HTML content or DOM element you want to wrap around the selected elements.

Use

The wrapAll() method is commonly used to create a wrapper around multiple elements. It is particularly useful when you need to add additional styling or functionality to a group of related elements.

Example

Consider the following HTML markup:

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

If you want to wrap all the li elements inside the ul element with a new div element, you can use the wrapAll() method as follows:

$(document).ready(function(){
  $("li").wrapAll("<div class='wrapper'></div>");
});

The resulting HTML markup will be:

Summary

The wrapAll() method is a useful jQuery DOM manipulation method that allows you to wrap a group of selected elements with a specified HTML content or DOM element. It is commonly used to create a wrapper around multiple elements and is helpful in adding additional styling or functionality to a group of related elements.