jQuery .wrapInner() Method

What You’ll Learn

The .wrapInner() method inserts a new wrapper around all contents inside each matched element — the outer tag stays in place. This tutorial covers syntax since 1.2, callback form since 1.4, comparisons with .wrap(), .wrapAll(), and .unwrap(), the official yellow-paragraph demo, and five practical try-it examples.

Introduction

Sometimes you need an inner container without changing the outer element tag — a padding shell inside a card, a styled frame around paragraph text while keeping the <p> semantic tag, or a plugin that expects content nested one level deeper. When the matched element should stay but its children need grouping, jQuery provides .wrapInner().

Available since jQuery 1.2, .wrapInner() wraps all child nodes inside each matched element separately. Pass an HTML string, selector, DOM element, or jQuery object. Since jQuery 1.4, a callback can return a custom inner wrapper per element — this refers to the current matched DOM node. This differs from .wrap(), which adds a parent outside the element.

The wrapping structure must contain exactly one innermost element where child nodes are placed. jQuery clones DOM nodes and jQuery objects rather than moving the original template. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .wrapInner() Method

.wrapInner( wrappingElement ) or .wrapInner( function ) creates a new wrapper inside each matched element around all its contents. jQuery clones the wrapper structure for every match — three paragraphs wrapped with .wrapInner( "<div class='inner'>" ) produce three separate <p><div class="inner">…</div></p> groups while each <p> tag remains the outer node.

The return value is the same jQuery collection (for chaining). All child nodes — text, elements, and comments — are grouped together inside the new wrapper. When you pass a DOM node or jQuery object, jQuery clones it rather than moving the original.

📝 Syntax

jQuery .wrapInner() supports two forms:

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

.wrapInner( 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 inner wrapper.

Wrap contents with callback — since 1.4

.wrapInner( function )

• Callback runs once per matched element; this refers to the current DOM element.
• Return an HTML string or jQuery object to use as the inner wrapper.
• Use for dynamic wrappers — e.g. a class derived from element index.

Return value

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

Official wrapInner paragraph demo

The jQuery API documentation wraps paragraph contents in an inner div with yellow background:

$( "p" ).wrapInner( "<div class='inner'></div>" );



// CSS for the official demo:

// p { background: yellow; }

// div.inner { border: 2px solid orange; }

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" ).wrapInner( "<div class='inner'></div>" );



// CSS for the official demo:

// p { background: yellow; }

// div.inner { border: 2px solid orange; }

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

After:  <p><div class="inner">One</div></p>

        <p><div class="inner">Two</div></p>



Each p tag stays; contents move inside div.inner

Yellow background on p, orange border on inner div

// .wrap() — adds parent OUTSIDE the p tag

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

// Result: <div class="outer"><p>Hello</p></div>



// .wrapInner() — adds wrapper INSIDE the p tag

$( "#b p" ).wrapInner( "<div class='inner'>" );

// Result: <p><div class="inner">Hello</div></p>

#a .wrap():      p moves inside outer div

#b .wrapInner():  p stays; Hello moves inside inner div



Use wrap for outer containers; wrapInner for inner shells

$( ".card" ).wrapInner( "<div class='card-body'></div>" );



// Before: <article class="card"><h3>Title</h3><p>Text</p></article>

// After:  <article class="card">

//           <div class="card-body"><h3>Title</h3><p>Text</p></div>

//         </article>



// CSS: .card-body { padding: 1rem; }

article.card tag unchanged

All children (h3, p) grouped inside .card-body

Padding applied to inner shell, not outer card

$( "p" ).wrapInner( function( index ) {

  return "<div class='inner item-" + index + "'></div>";

});



// First p  → <p><div class="inner item-0">…</div></p>

// Second p → <p><div class="inner item-1">…</div></p>

Each p gets an inner div with index-based class

Callback runs once per matched element

this === current DOM element inside function

// Using document.createElement

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

shell.className = "inner";

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



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

var $shell = $( "<div class='inner'></div>" );

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



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

Each paragraph contents wrapped in a cloned .inner div

Original createElement / jQuery template not moved

Three matches → three separate cloned inner wrappers

🚀 Common Use Cases

• Inner padding shells — add a .card-body or .content-inner div inside cards without changing the outer tag.
• Semantic preservation — wrap paragraph text inside a styled div while keeping the <p> element for accessibility.
• Plugin requirements — nest content one level deeper inside the structure a third-party script expects.
• Scroll containers — insert an inner overflow wrapper inside a fixed-height panel.
• Dynamic inner styling — callback form assigns per-element classes on the inner wrapper from index or data.
• Grouped child nodes — bundle mixed text and element children inside one inner container per match.

📝 Notes

• Available since jQuery 1.2 — callback form added in jQuery 1.4.
• Wraps all contents inside each matched element separately (use .wrapAll() for one shared outer wrapper).
• Outer matched element tag stays in place; new wrapper is inserted inside it.
• Wrapper HTML must contain exactly one innermost element; nested outer tags are allowed.
• Callback runs once per matched element; this refers to the current DOM element.
• DOM elements and jQuery objects are cloned, not moved from their source location.
• Remove inner wrappers with .children().contents().unwrap() or similar patterns.

💡 Best Practices