.wrap()?.wrap() inserts a parent structure around each matched element (since jQuery 1.0). Every match gets its own copy of the wrapper. Returns the original jQuery set. Inverse: .unwrap().
$(els).wrap("<div class='box'></div>")
$(els).wrap(function (i) { return "<div class='n" + i + "'>"; })
Before: <p>A</p><p>B</p>
After: <div><p>A</p></div><div><p>B</p></div>
.wrap() → each element gets its own parent
.wrapAll() → one parent for the whole set
.wrapInner()→ wrap contents inside the element| Need | Use |
|---|---|
| Parent around each match | $(els).wrap("<div>") |
| One parent for the whole set | $(els).wrapAll("<div>") |
| Wrap contents inside each | $(els).wrapInner("<span>") |
| Remove the parent again | $(els).unwrap() |
.wrap()Select the elements, then pass a wrapper structure or a callback.
$("p"), $(".item"), etc..wrapAll() for one shared parent.| Piece | Required? | Role |
|---|---|---|
| jQuery set | Yes | Elements that receive a parent |
wrappingElement | Yes* | HTML / element / jQuery / selector |
function(index) | Alt (1.4+) | Return wrapper per element |
| Return | — | Original matched set |
| Since | — | 1.0; callback in 1.4 |
wrap(wrapperOrFn):
for each element in this set:
structure = copy of wrapper
(or result of fn(index) for this element)
insert structure where element is
place element inside the innermost node of structure
return this set
// structure may be nested, but must have one innermost elementKeep these facts handy when adding wrappers.
| Topic | Detail |
|---|---|
| Syntax | .wrap(html|el|jQuery|fn) |
| Scope | Each matched element, separately |
| Template | Cloned per match (original not moved) |
| Nested OK | One innermost target required |
| vs wrapAll | One shared parent for the set |
| Inverse | .unwrap() |
| Since | jQuery 1.0 |
Wrap a small HTML sketch and compare wrap, wrapAll, and callback forms.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
.wrap()Wrap each paragraph in its own div.
$("p.demo").wrap("<div class='box'></div>");
console.log($("#host").html());
// <div class="box"><p class="demo">Hello</p></div>
// <div class="box"><p class="demo">World</p></div>p.demo nodes are in the set.<div class="box"> for each..wrap() vs .wrapAll()See the difference between per-item wrap and one shared parent.
$("#a p").wrap("<div>");
$("#b p").wrapAll("<div>");
console.log("wrap:", $("#a").html());
console.log("wrapAll:", $("#b").html());p in #a gets its own div.p nodes in #b share one div.wrap; one group → wrapAll.Return a different class for each matched element.
$("p.demo").wrap(function (i) {
return "<div class='item-" + i + "'></div>";
});
console.log($("#host").html());0, then 1.this is the current DOM element.Pass a nested HTML string; the element lands in the innermost node.
$("#msg").wrap("<div class='outer'><div class='inner'></div></div>");
console.log($("#host").html());
// <div class="outer"><div class="inner"><p id="msg">Hi</p></div></div>#msg is placed inside .inner.document.createElement("div") also works as a template..wrap() vs .wrapInner()Outer parent vs wrapping the contents inside the element.
$("#w").wrap("<div class='box'></div>");
$("#i").wrapInner("<strong></strong>");
console.log($("#host").html());#w gains an outer div.box parent.#i stays the outer node; its text moves into <strong>..unwrap() to strip that outer parent later.Check these before wrapping elements in production.
Three paragraphs → three parents. Need one shared parent? Use .wrapAll().
Only matched elements move into the new parent. Loose text between spans stays outside.
Passing a jQuery object clones it. The original template node is not moved from the page.
Nested wrappers must have a single deepest element — that is where the match is placed.
.wrap() needs jQuery 1.0+. The callback form needs jQuery 1.4+.
Works in Chrome, Firefox, Safari, and Edge when jQuery is loaded. Use 1.4+ for the function callback signature.
Bottom line: Safe for all supported jQuery versions. Prefer wrapAll when the whole set should share one parent.
| Approach | Cost | Best for |
|---|---|---|
.wrap() | O(n) wrappers | Per-item containers |
.wrapAll() | One wrapper | Group the whole set |
| Callback wrap | O(n) + fn cost | Dynamic per-item HTML |
Cost scales with the number of matched elements because each gets a cloned wrapper. Prefer .wrapAll() when one container is enough.
.wrap().One line: .wrap() gives every matched element its own new parent.
Learn how to wrap the entire set in a single shared parent.
9 people found this page helpful