jQuery wrap() and unwrap()

The wrap() method places a new HTML element around selected elements. The unwrap() method does the opposite — it removes the parent element and leaves the child in place. These methods let you restructure HTML without rewriting the page.

The wrap() Method

Think of wrap() like putting a gift box around something that is already there. You select an item and wrap it with a container.

Syntax

$(selector).wrap(wrappingElement);

Examples:
$("p").wrap("<div>");
$("img").wrap("<figure>");
$("span").wrap("<div class='highlight'></div>");

Diagram: Before and After wrap()

  Before wrap():
  <p>Hello World</p>

  $("p").wrap("<div class='box'></div>");

  After wrap():
  <div class="box">
      <p>Hello World</p>
  </div>

Basic wrap() Example

$(document).ready(function() {
    $("img").wrap("<figure class='image-container'></figure>");
});

Every image on the page gets wrapped in a figure element, making it easy to add captions or apply consistent styling.

wrap() Wraps Each Element Separately

When you select multiple elements, wrap() wraps each one individually — not all together in one wrapper.

HTML:
<p>First</p>
<p>Second</p>

$("p").wrap("<div class='card'></div>");

Result:
<div class="card"><p>First</p></div>
<div class="card"><p>Second</p></div>

Each paragraph gets its own wrapper div.

wrapAll() — Wrap All in One Container

If you want all selected elements inside a single wrapper, use wrapAll() instead.

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

Result:
<div class="group">
    <p>First</p>
    <p>Second</p>
</div>

All paragraphs move into one wrapper div.

Diagram: wrap() vs wrapAll()

  Original:
  <p>A</p>  <p>B</p>  <p>C</p>

  wrap("<div>"):
  <div><p>A</p></div>  <div><p>B</p></div>  <div><p>C</p></div>
  (3 separate divs)

  wrapAll("<div>"):
  <div><p>A</p><p>B</p><p>C</p></div>
  (1 shared div)

wrapInner() — Wrap the Content Inside

The wrapInner() method wraps the child content (not the element itself) with a new tag.

HTML:
<div id="promo">Special Offer Today!</div>

$("#promo").wrapInner("<strong></strong>");

Result:
<div id="promo"><strong>Special Offer Today!</strong></div>

The unwrap() Method

The unwrap() method removes the parent element of the selected elements. The selected elements stay in place — only their parent is removed.

Diagram: Before and After unwrap()

  Before unwrap():
  <div class="box">
      <p>Hello World</p>
  </div>

  $("p").unwrap();

  After unwrap():
  <p>Hello World</p>

  The <div class="box"> is removed.
  The <p> stays exactly where it was.

Practical: Toggle Highlight Wrapper

$(document).ready(function() {
    var wrapped = false;

    $("#highlightBtn").click(function() {
        if (!wrapped) {
            $("p").wrap("<div class='highlight-box'></div>");
            $(this).text("Remove Highlight");
        } else {
            $("p").unwrap();
            $(this).text("Add Highlight");
        }
        wrapped = !wrapped;
    });
});

Each click wraps or unwraps paragraphs in a highlight container — a clean toggle pattern.

Practical: Responsive Image Wrapping

$(document).ready(function() {
    // Wrap all images in a responsive container
    $("img").wrap("<div class='responsive-img'></div>");

    // On small screens, add a caption from the alt attribute
    if ($(window).width() < 600) {
        $("img").each(function() {
            var altText = $(this).attr("alt");
            $(this).after("<p class='caption'>" + altText + "</p>");
        });
    }
});

Quick Summary

• wrap() puts a new element around each selected element individually.
• wrapAll() puts one new element around all selected elements together.
• wrapInner() wraps the inner content of the selected element.
• unwrap() removes the parent element, leaving the child in place.
• These methods restructure HTML without deleting or rewriting content.

Practical: Print-Friendly Wrapping

Before the user prints the page, wrap all data tables in a print container to apply print-only styles. After printing, remove the wrapper to restore the normal layout.

$(document).ready(function() {
    window.onbeforeprint = function() {
        $("table").wrap("<div class='print-frame'></div>");
    };
    window.onafterprint = function() {
        $("table").unwrap();
    };
});

The wrapper appears only during printing and vanishes automatically when printing finishes.