jQuery .wrapAll(): Put Selected Elements in One Wrapper

jQuery Reference

.wrapAll() collects every matched element inside one shared HTML structure. Separated elements can move together, changing their original positions and layout.

Syntax and behavior

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

The wrapper is created before the first selected element, and the remaining selected elements move into it. Unselected siblings between them are not included. .wrap() creates a parent for each element; .wrapAll() creates one parent for the whole selection. In jQuery 3.0 and later, a wrapper callback runs once and returns the wrapper structure. The method returns the original selection.

The official jQuery .wrapAll() 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 wrapAll 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 id="note">Middle note</p>
  <p class="item">Second paragraph</p>
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $(".item").wrapAll("<div class='group marked'></div>");
      $("#output").text("Inside group: " + $(".group").children().map(function () { return $(this).text(); }).get().join(" / ") +
        " | Note parent: " + $("#note").parent().attr("id"));
    });
  </script>
</body>
</html>

Expected result

One border surrounds First paragraph and Second paragraph. Middle note remains outside the group and now appears after the whole group. The output is Inside group: First paragraph / Second paragraph | Note parent: container.

Important details and troubleshooting

Elements from different parents can be collected into one location. Scope the selection by parent or use .wrap() if the original layout and reading order must remain intact.
Use one innermost element in a nested wrapper so the insertion location is unambiguous.
This moves existing elements rather than making copies. If events are delegated from an original ancestor, check whether the moved elements still bubble events to that ancestor.
Removing the wrapper with .unwrap() does not restore separated elements to their original positions. Record those positions before moving them if restoration is required.

Compare the behavior with .wrap() with separate wrappers, .unwrap() and parent removal.

jQuery Reference

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 .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.

jQuery .wrapAll(): Put Selected Elements in One Wrapper

Collect selected elements into one wrapper and inspect how separated siblings move, including the limits of unwrapping.

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

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

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 .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 :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 :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 .removeAttr(): Delete HTML Attributes

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