.wrapAll()?.wrapAll() wraps all matched elements in one shared parent structure (since jQuery 1.2). Contrast with .wrap(), which wraps each match separately.
$("p").wrapAll("<div class='group'></div>")
$(".inner").wrapAll(document.createElement("div"))
$("p").wrapAll(function () { return "<section>"; }) // 1.4+
Before: <p>A</p><p>B</p>
After: <div class="group"><p>A</p><p>B</p></div>| Need | Use |
|---|---|
| One parent for the whole set | $(els).wrapAll("<div>") |
| Parent around each match | $(els).wrap("<div>") |
| Wrap contents inside each | $(els).wrapInner("<span>") |
| Remove the parent again | $(els).unwrap() |
.wrapAll()Select the group, then pass one wrapper structure.
| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Elements grouped under one parent |
wrappingElement | Yes* | HTML / element / jQuery / selector |
function | Alt (1.4+) | Returns wrapper; this = first match (3.0+) |
if argument is a function:
wrapper = function.call(firstMatchedElement)
else:
wrapper = clone(wrappingElement) // templates are cloned, not moved
insert wrapper before the first matched element
move all matched elements into the innermost wrapper node
// non-matched siblings between them stay outside
return original matched setKeep these facts handy while grouping nodes.
| Topic | Detail |
|---|---|
| Since | jQuery 1.2 (callback 1.4) |
| Result | One shared parent for the whole set |
| vs wrap | .wrap() = one parent each |
| Gaps | Non-matched siblings stay outside |
| Templates | jQuery/DOM templates are cloned |
| Return | Original matched set |
| Inverse | .unwrap() on the children |
Wrap all sample paragraphs in one parent, or reset.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Wrap every paragraph in one new div.
$("p").wrapAll("<div></div>");p is matched.$("p") set.document.createElementPass a real DOM node as the wrapper template.
$("p").wrapAll(document.createElement("div"));div is built with the DOM API."<div>".Only matched nodes enter the wrapper; neighbors in between do not.
$("span").wrapAll("<div></div>");
// text between spans stays outside the new divspan elements match..wrapAll() groups the set — not the full sibling range.Return the wrapper from a function (since 1.4).
$("p").wrapAll(function () {
return "<div class='group'></div>";
});Pass a jQuery object — it is cloned, not moved.
$("p").wrapAll($(".template"));
// .template stays in place; a clone wraps the paragraphs$(".template") is the pattern.Check these before grouping large selections.
Only matched elements move into the wrapper. Text or nodes between them stay outside.
Passing $(".box") does not move that node — a clone wraps the set.
Nested wrapper HTML is fine, but there must be a single deepest container for the matches.
Do not build wrapper strings from URL params, cookies, or form fields without escaping.
.wrapAll() has been part of jQuery since 1.2. The function callback arrived in 1.4; jQuery 3.0 fixed it to run once for the set.
Supported in all browsers that run jQuery 1.2+. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Use when the whole selection should share one parent. Prefer .wrap() when each match needs its own.
| Approach | Cost | Best for |
|---|---|---|
| Small set + one wrapAll | Cheap | Grouping a short list |
| Deep nested wrapper HTML | Moderate | Occasional layout shells |
| Huge selections often | Expensive | Avoid — restructure less often |
One shared wrapper is cheaper than wrapping each node separately with .wrap() when you only need a single group container.
.wrap() = parent per element..unwrap() removes the shared parent.One line: .wrapAll() puts the whole selection under one parent — use it when you need a group container, not per-item wrappers.
Wrap the contents inside each matched element while keeping the outer tag.
8 people found this page helpful