Code has been added to clipboard!

Learn to Use jQuery .wrap(), .wrapAll() and .wrapInner() Methods

Reading time 2 min
Published Jul 3, 2019
Updated Sep 27, 2019

jQuery wrap: Main Tips

  • The .wrap() jQuery function places the specified HTML elements around every selected element.
  • jQuery .wrapAll() puts them around the whole set of matched elements.
  • To place the specified elements around the content of each selected element, use jQuery .wrapInner().

Using .wrap()

The jQuery .wrap() element function inserts the specified HTML content or jQuery object around each matched element. To undo this, use the .unwrap() method.

The following example wraps content around a <h2> element:

Note: jQuery .wrap() can be used to return the unmodified set of HTML elements to use in chaining.

The .wrap() jQuery syntax includes a wrapElement parameter, indicating the content to add:

$(selector).wrap(wrapElement);

Alternatively, you can include a function as the parameter. It specifies the callback function, delivering the content to wrap around selected HTML elements:

$(selector).wrap(function);

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Learn to Apply .wrapAll()

Using jQuery .wrapAll() places the specified elements around the whole set of matched elements. See an example below:

Example
$("button").click(() => {
    $("p").wrapAll("<div class=\"main\"></div>");
});

As previously, you have to indicate the content to add in the wrapElement parameter:

$(selector).wrapAll(wrapElement);

Again, you can also add a function, returning the content to wrap:

$(selector).wrapAll(function);

.wrapInner() Explained

Now, jQuery .wrapInner() places the specified elements around the content of every matched element.

jQuery .wrapInner() also accepts a wrapElement parameter, specifying the elements to wrap. It can also be defined in a function, returning the HTML content or JavaScript object to put around elements' content:

$(selector).wrapInner(wrapElement);

$(selector).wrapInner(function);

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 30/01/2021
3176 People Used
Only 97 Left
Rating
5.0