jQuery .wrapInner() Method

What Is .wrapInner()?

.wrapInner() wraps the contents inside each matched element (since jQuery 1.2). The outer tag stays put — unlike .wrap(), which adds a parent outside.

$("p").wrapInner("<b></b>")
$(".inner").wrapInner(document.createElement("div"))
$(".inner").wrapInner(function () {
  return "<div class='" + $(this).text() + "'>";
});

Before:  <p>Hello</p>
After:   <p><b>Hello</b></p>   // outer <p> unchanged

How to Use .wrapInner()

Select containers, then wrap what is inside each one.

1. Select the outer elements whose contents you want wrapped.
2. Pass HTML, a DOM element, a jQuery object, or a selector as the wrapper.
3. Or pass a function (1.4+) that returns a wrapper per element.
4. Use well-formed HTML with one innermost element for nested shells.

Pseudocode

for each matched element el at index i:
    if argument is a function:
        wrapper = function.call(el, i)
    else:
        wrapper = clone(wrappingElement)

    move all child nodes of el into the innermost wrapper
    append that wrapper as the only child of el

return original matched set

Cheat Sheet

Keep these facts handy while wrapping contents.

Live Preview

Wrap paragraph contents in <b>, or reset.

Ready — pick an action and Run

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("p").wrapInner("<b></b>");

Each <p> still exists
Contents are inside <b>

$("p").wrapInner(document.createElement("b"));

Same result as HTML string — bold contents

$(".inner").wrapInner(function () {
  return "<div class='" + $(this).text() + "'></div>";
});

Each .inner keeps its tag
Contents sit in a classed div

$("#box").wrapInner("<div><div></div></div>");

#box → div → div → original contents

$("p").wrapInner($("<span class='mark'></span>"));

Each paragraph’s text is inside span.mark

Performance Notes

Each match gets its own wrapper. Prefer .wrapAll() when you only need one shared outer container for the set.

Key Takeaways