A brief discussion on the difference between wrap() wrapAll() and wrapInner() in jQuery

This article combines W3School's documentation to analyze wrap() wrapAll() and wrapInner() in jQuery Differences, and a picture and text comparison tutorial is given. It is very simple and practical. Friends in need can refer to it

When I was reading a book tonight, I found that jQuery has three methods of wrapping nodes. I searched on Baidu for jQuery wrap( ) / wrapAll() / wrapInner(), sure enough search results W3School's documentation description is ranked first.

However, W3School’s explanation is this:

jQuery document operation - wrap() method

wrap() method places each selected element in the specified HTML content or elements.
jQuery Document Operations - wrapAll() method

wrapAll() Places all selected elements within the specified HTML content or element.
jQuery document operations - wrapInner() method

wrapInner() method uses the specified HTML content or element to wrap all content (inner HTML) in each selected element.
I have read few books, and it is really annoying to see that such explanations cannot immediately solve my confusion.

It is most practical to do it yourself.

This is the original code used for comparison:

I am occupying a seat.

I am occupying a seat.

wrap() method

$("p").wrap("");

Result:

It can be seen from the figure that the strong tag surrounds each matching p tag.

wrapAll() method

$("p").wrapAll("");

Result:

It can be seen from the picture that the strong tag surrounds all matching p tags at once.

wrapInner() method

$("p").wrapInner("");

Result:

It can be seen from the figure that the strong tag is embedded in each matching p tag.

Of course, in the end, it seems that the effect of the three methods is the same.

The above is the detailed content of A brief discussion on the difference between wrap() wrapAll() and wrapInner() in jQuery. For more information, please follow other related articles on the PHP Chinese website!