jQuery .wrapAll() Method

What You’ll Learn

The .wrapAll() method inserts a single new parent around the entire matched collection — all siblings move together into one wrapper. This tutorial covers syntax since 1.2, callback form since 1.4, comparisons with .wrap(), .wrapInner(), and .unwrap(), the official span demo, and five practical try-it examples.

Introduction

Sometimes you need to group sibling elements under one container — a <div> around a set of paragraphs, a fieldset around related inputs, or a semantic wrapper for a block of inline spans. When every matched element should share the same parent, jQuery provides .wrapAll().

Available since jQuery 1.2, .wrapAll() inserts one wrapper around the entire matched collection. Pass an HTML string, selector, DOM element, or jQuery object. Since jQuery 1.4, a callback can return a custom wrapper — the function runs once, and this refers to the first matched element. This differs from .wrap(), which wraps each element separately.

Text between sibling inline elements is not included when wrapping spans. jQuery clones DOM nodes and jQuery objects rather than moving the original template. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .wrapAll() Method

.wrapAll( wrappingElement ) or .wrapAll( function ) creates one new parent around the entire jQuery collection. All matched nodes move together inside that single wrapper — three paragraphs wrapped with .wrapAll( "<div>" ) produce one <div><p>…</p><p>…</p><p>…</p></div> group.

The return value is the same jQuery collection (for chaining). When you pass a DOM node or jQuery object, jQuery clones it once rather than moving the original. The callback form runs once for the whole set; prior to jQuery 3.0 it was incorrectly called per element.

📝 Syntax

jQuery .wrapAll() supports two forms:

Wrap all matches with HTML string, selector, element, or jQuery object — since 1.2

.wrapAll( wrappingElement )

• wrappingElement — HTML string, selector, DOM element, or jQuery object.
• All matched elements move together into one shared wrapper.
• DOM elements and jQuery objects are cloned, not moved from their source.

Wrap all matches with callback — since 1.4

.wrapAll( function )

• Callback runs once for the entire collection (fixed in jQuery 3.0).
• this inside the function refers to the first matched DOM element.
• Return an HTML string or jQuery object to use as the shared wrapper.

Return value

• Returns the same jQuery collection that was wrapped.
• Chain further manipulation on the wrapped elements.

Official wrapAll paragraph demo

The jQuery API documentation wraps all paragraphs in a single div:

$( "p" ).wrapAll( "<div>" );



// CSS for the official demo:

// div { border: 1px solid blue; }

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).wrapAll( "<div>" );



// CSS for the official demo:

// div { border: 1px solid blue; }

Before: <p>One</p><p>Two</p><p>Three</p>

After:  <div><p>One</p><p>Two</p><p>Three</p></div>



All paragraphs share one div wrapper

Blue border applied via CSS on div

// .wrap() — three separate divs

$( "#a p" ).wrap( "<div class='each'>" );

// Result: <div class="each"><p>…</p></div> × 3



// .wrapAll() — one shared div

$( "#b p" ).wrapAll( "<div class='group'>" );

// Result: <div class="group"><p>…</p><p>…</p><p>…</p></div>

#a .wrap():     3 divs, 1 paragraph each

#b .wrapAll():  1 div, 3 paragraphs inside



Use wrap for per-item styling; wrapAll for grouping

// HTML: Hello <span>John</span> and <span>Paul</span>!

$( "span" ).wrapAll( "<div></div>" );



// Result: Hello <div><span>John</span><span>Paul</span></div>!

// "and" stays outside the wrapper

Both spans wrapped together in one <div>

Text "Hello ", " and ", "!" remain as text nodes

Only matched elements move inside the new parent

$( "p" ).wrapAll( function() {

  var count = $( this ).parent().find( "p" ).length;

  return "<div class='batch count-" + count + "'></div>";

});



// All paragraphs share one div whose class reflects the batch

// this === first matched <p> element in the collection

One shared div wraps all matched paragraphs

Callback invoked once (jQuery 3.0+)

this refers to the first matched element

// Using document.createElement

var wrapper = document.createElement( "div" );

wrapper.className = "group";

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



// Using a jQuery object — also cloned, not moved

var $wrapper = $( "<div class='group'></div>" );

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



// Original wrapper variable stays in memory; one clone wraps the set

All paragraphs wrapped in one cloned .group div

Original createElement / jQuery template not moved

Three matches → one shared cloned wrapper

🚀 Common Use Cases

• Sibling grouping — wrap a set of paragraphs, list items, or table rows in one container for layout or styling.
• Form fieldsets — group related inputs under one fieldset or div without wrapping each input separately.
• Plugin batch setup — wrap a collection of elements in the single parent structure a third-party script expects.
• Inline element batches — group multiple spans or links under one parent while leaving intervening text untouched.
• Dynamic batch wrappers — callback form assigns one shared class or data attribute based on the first matched element.
• CMS cleanup — re-group scattered sibling blocks under one semantic wrapper during content normalization.

📝 Notes

• Available since jQuery 1.2 — callback form added in jQuery 1.4.
• Wraps all matched elements together in one shared wrapper (use .wrap() for separate copies).
• Callback runs once for the collection; this refers to the first matched element (fixed in jQuery 3.0).
• Text between sibling inline elements is not wrapped — only matched nodes move.
• DOM elements and jQuery objects are cloned, not moved from their source location.
• Use .unwrap() to remove the shared parent wrapper.
• Do not confuse with .wrapInner(), which wraps contents inside each matched element.

💡 Best Practices