jQuery .wrap() Method

What You’ll Learn

The .wrap() method inserts a new parent element around each matched node — the inverse of .unwrap(). This tutorial covers syntax since 1.0, callback form since 1.4, nested wrapper structures, comparisons with .wrapInner(), .wrapAll(), and .unwrap(), the official blue-border demo, and five practical try-it examples.

Introduction

Sometimes you need to add a container around existing elements — a <div> for styling, a semantic wrapper for accessibility, or a plugin that expects inputs inside a specific parent. When the matched elements should stay but gain a new parent, jQuery provides .wrap().

Available since jQuery 1.0, .wrap() inserts a wrapper around each matched element separately. Pass an HTML string, selector, DOM element, or jQuery object. Since jQuery 1.4, a callback can return a custom wrapper per element. This is the opposite of .unwrap(), which removes the immediate parent and promotes children up one level.

The wrapping structure must contain exactly one innermost element where the matched node is placed; outer layers can be nested. Text between sibling inline elements is not included when wrapping spans. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .wrap() Method

.wrap( wrappingElement ) or .wrap( function ) creates a new parent around each matched element. jQuery clones the wrapper structure for every match — three paragraphs wrapped with .wrap( "<div>" ) produce three separate <div><p>…</p></div> groups.

The return value is the same jQuery collection (for chaining). The wrapper HTML must have a single innermost element; nested markup like <div class="outer"><div class="inner"></div></div> is valid. When you pass a DOM node or jQuery object, jQuery clones it rather than moving the original.

📝 Syntax

jQuery .wrap() supports two forms:

Wrap with HTML string, selector, element, or jQuery object — since 1.0

.wrap( wrappingElement )

• wrappingElement — HTML string, selector, DOM element, or jQuery object.
• Structure must have one innermost element; can include nested outer layers.
• Each matched element gets its own copy of the wrapper.

Wrap with callback — since 1.4

.wrap( function )

• Callback receives the index and the DOM element; return HTML string or jQuery object.
• Use for dynamic wrappers — e.g. a class derived from element text.

Return value

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

Official wrap/unwrap toggle

The jQuery API documentation demo toggles a div wrapper around paragraphs:

var pTags = $( "p" );
$( "button" ).on( "click", function() {
  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div>" );
  }
});

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" ).wrap( "<div>" );

// CSS for the official demo:
// div { border: 1px solid blue; }

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

Each paragraph gets its own div wrapper
Blue border applied via CSS on div

$( ".inner" ).wrap(
  "<div class='container'><div class='inner'></div></div>"
);

// Before: <div class="inner">Content</div>
// After:  <div class="container">
//           <div class="inner"><div class="inner">Content</div></div>
//         </div>

.container > .inner > original .inner element
Nested outer layers allowed — one innermost slot per match
Each .inner match gets its own container copy

// HTML: Hello <span>John</span> and <span>Paul</span>!
$( "span" ).wrap( "<div></div>" );

// Result: Hello <div><span>John</span></div> and
//         <div><span>Paul</span></div>!
// "and" stays outside both wrappers

Each span wrapped individually in <div>
Text "Hello ", " and ", "!" remain as text nodes
Only matched elements move inside new parents

$( "span" ).wrap( function() {
  var className = $( this ).text();
  return "<div class='" + className + "'></div>";
});

// span text "John" → <div class="John"><span>John</span></div>
// span text "Paul" → <div class="Paul"><span>Paul</span></div>

Each span gets a div whose class matches its text
Callback runs once per matched element
Return HTML string or jQuery object from function

// Using document.createElement
var wrapper = document.createElement( "div" );
wrapper.className = "box";
$( "p" ).wrap( wrapper );

// Using a jQuery object — also cloned, not moved
var $wrapper = $( "<div class='box'></div>" );
$( "p" ).wrap( $wrapper );

// Original wrapper variable stays in memory; clones used per match

Each paragraph wrapped in a cloned .box div
Original createElement / jQuery template not moved
Three matches → three separate cloned wrappers

🚀 Common Use Cases

• Visual grouping — add bordered or shaded divs around paragraphs, cards, or list items for layout.
• Plugin requirements — wrap inputs or images in the container structure a third-party script expects.
• Toggle editing modes — wrap content for preview, unwrap for plain editing (pair with .unwrap()).
• Nested layout shells — insert outer grid cells and inner content frames in one .wrap() call.
• Dynamic styling — callback form assigns per-element classes or data attributes on the wrapper.
• Inline element isolation — wrap spans or links individually without affecting intervening text nodes.

📝 Notes

• Available since jQuery 1.0 — callback form added in jQuery 1.4.
• Wraps each matched element separately (use .wrapAll() for one shared wrapper).
• Inverse of .unwrap() — the official demo toggles both methods.
• Wrapper HTML must contain exactly one innermost element; nested outer tags are allowed.
• 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.
• Do not confuse with .wrapInner(), which wraps contents inside the matched element.

💡 Best Practices