jQuery .add(): Combine Element Selections

jQuery Reference

.add() returns a new jQuery object containing the current selection and additional elements. It neither inserts those elements into the document nor automatically changes the original variable’s selection.

Syntax and behavior

const $combined = $("li").add("p.note");
$combined.addClass("marked");

You can pass a selector, DOM element, jQuery object, or HTML string. A jQuery object is a collection of selected elements on which jQuery methods can operate. Duplicate elements are removed. Elements connected to the same document are sorted in document order, so do not assume that the argument order becomes the result order. Passing HTML creates nodes, but they remain off the page until you use an insertion method such as .appendTo().

The official jQuery .add() 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 add 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>
<ul><li>First item</li><li>Second item</li></ul>
<p class="note">List note</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $items = $("li");
      const $combined = $items.add("p.note");
      $combined.addClass("marked");
      $("#output").text("Original: " + $items.length + " / Combined: " + $combined.length);
    });
  </script>
</body>
</html>

Expected result

Both list items and the note paragraph are highlighted. The output reads Original: 2 / Combined: 3. The original $items object still contains only the two li elements.

Important details and troubleshooting

To expand a variable’s selection, assign the returned object back to that variable. Declare the variable with let if it needs reassignment.
Do not rely on the order of disconnected elements or elements from different documents. Construct a jQuery object from an array of DOM nodes when a specific order is required.
.addBack() combines the current selection with the immediately previous selection in the traversal stack. Use .add() when adding an independent target.

Compare the behavior with .addBack() and the traversal stack, .appendTo() with content first.

jQuery Reference

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 .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .addBack(): Include the Previous Traversal Selection

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

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 .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 :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 .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

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.