jQuery .wrap(): Wrap Each Element Separately

jQuery Reference

.wrap() places a separate HTML structure around each matched element. Selecting two elements normally creates two wrappers, unlike .wrapAll(), which creates one shared wrapper.

Syntax and behavior

$(".item").wrap("<div class='group'></div>");
$(".item").wrap("<div class='outer'><div class='inner'></div></div>");

Supply an HTML string, DOM element, jQuery object, or selector for the wrapper. If a selector or collection has several elements, jQuery uses the first. A nested wrapper should have one innermost insertion element. The return value is the original selection, not the new parents. A jQuery object is a collection that exposes jQuery methods for its selected elements.

The official jQuery .wrap() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery wrap example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container">
  <p class="item">First paragraph</p>
  <p class="item">Second paragraph</p>
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $(".item").wrap("<div class='group marked'></div>");
      $("#output").text("Parents: " + $("#container > .group").length +
        " / Paragraphs per parent: " + $(".group").map(function () { return $(this).children("p").length; }).get().join(", "));
    });
  </script>
</body>
</html>

Expected result

Each paragraph receives a separate border. The output is Parents: 2 / Paragraphs per parent: 1, 1. In the Elements panel, confirm that container has two group children, each containing one paragraph.

Important details and troubleshooting

Running the wrapping code again adds another nested parent. Check for the intended existing wrapper before running it repeatedly on dynamic content.
An id in the wrapper can be duplicated across several parents. Use a class for repeated structures.
Choose a wrapper that can contain the selected elements in valid HTML. Avoid wrapping whole paragraphs in a span or another p.
Use .wrapAll() to collect all targets into one parent. To remove the created parents, call .unwrap(".group") on their children.

Compare the behavior with .unwrap() and parent removal, .wrapAll() with one shared wrapper.

jQuery Reference

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .removeAttr(): Delete HTML Attributes

Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.

jQuery .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.