.add()?.add() (since jQuery 1.0) builds a new jQuery object from the union of the current matched elements and extras you pass in — selector, DOM node(s), HTML string, or another jQuery object (1.1+). It does not insert nodes into the page.
$("p").add("div") // union of p + div
$("li").add("p") // list items + paragraph
$("p").add(document.getElementById("a"))
$("p").add("<b>hi</b>") // HTML in memory only
// Wrong — original unchanged:
// pdiv.add("div");
// Right:
// pdiv = pdiv.add("div");.add()Start with a set, merge extras, then style or act on the combined collection.
$("div") or $("li"))..add(selector), .add(element), .add(html), or .add($other).set = set.add(…)..add() on the page, chain an insertion method.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Starting collection |
| Selector / element / html | One form | Extras to merge (1.0+) |
| jQuery selection | One form | Merge another set (1.1+) |
| selector, context | Optional | Scoped search (1.4+) |
| Return value | — | New jQuery union (must capture or chain) |
call $(set).add(extra)
result = copy of set
extraElements = resolve(extra) // selector / node / html / jQuery
for each e in extraElements:
if e not already in result:
result.add(e)
if all elements share one document:
sort result in document order // since jQuery 1.4
return result as a NEW jQuery object
// original set is unchangedKeep union vs insert vs exclude clear.
| Topic | Detail |
|---|---|
| Syntax | .add(sel|el|html|jQuery[, ctx]) |
| Since | 1.0 · jQuery object 1.1 · context 1.4 |
| Order | Document order (same document, 1.4+) |
| Mutates original? | No — reassign or chain |
vs .append() | Collection vs DOM insert |
vs .not() | Union vs exclude |
| Reverse | .not() or .end() |
Merge different node types, then list the combined set in document order.
Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.
Only early chain steps hit the original set (jQuery API demo idea).
$("div").append(" [border]")
.add("p")
.append(" [bg]");div..append() runs only on those divs..add("p") returns a new set with divs and paragraphs..append() runs on the whole union.$("p").add("span")Merge two tag types, then style once.
$("p").add("span").append(" [together]");p elements..add("span") includes every span..append() marks both tags.Results sort in document order — list first, then the paragraph.
$("li").add("p").append(" [red]");li.p.Pass a node from getElementById without wrapping it first.
$("p").add(document.getElementById("a")).append(" [set]");a)..add(element) merges that node into the set.$(element) first.Capture the return value — .add() never mutates in place.
var collection = $("p");
// collection.add(document.getElementById("a")); // WRONG
collection = collection.add(document.getElementById("a"));
collection.append(" [yes]");collection starts as only paragraphs..add() without using the return value does nothing useful.collection..append() hits paragraphs and the extra node.Common mistakes when growing a jQuery set.
Official warning: pdiv.add("div") alone leaves pdiv unchanged. Chain or reassign.
.add("<p>hi</p>") creates nodes but does not show them. Append with .append() / .appendTo().
Since 1.4, same-document unions sort by page position. Cross-document order is undefined.
.add() ≠ .append()One grows the collection; the other inserts into the DOM. Do not mix the names up.
.add() has been part of jQuery since 1.0. jQuery-object arguments arrived in 1.1; selector + context and document-order sorting in 1.4. It works in every browser that runs your loaded jQuery version.
Supported across jQuery 1.x, 2.x, and 3.x. Prefer a current jQuery 3.x build. Always capture or chain the returned set.
Bottom line: Safe for merging selectors, DOM nodes, and jQuery objects. Remember: new set, document order since 1.4, HTML needs an insert step.
| Approach | Cost | Best for |
|---|---|---|
.add(element) | Cheapest | Known DOM node already in hand |
.add(selector) | OK | Small, scoped pages |
.add(sel, context) | Better | Limit the search root (1.4+) |
| One multi-selector | Often enough | $("p, span") when both are known upfront |
Prefer a single combined selector when you know both sets ahead of time. Use .add() when sets arrive in steps or from different sources.
.addBack() restores prior set members.One line: .add() grows the collection, not the DOM — assign the result, then style or insert.
Learn how to add the previous set of elements back into the chain.
9 people found this page helpful