jQuery .addBack() Method

Beginner

6 min read

Updated: Oct 2026

5 examples

Live preview

jQuery .addBack() method — merge previous stack set with current selection

Definition

What Is `.addBack()`?

.addBack([selector]) (since jQuery 1.8) merges the previous set on jQuery’s traversal stack with the current matched set. Optional selector filters the combined result. Traversal methods push a new set; .addBack() brings the prior one back.

Remember

$("li.third-item").nextAll().addBack()   // items 3, 4, 5 (official)
$("div").find("p").addBack()             // div + its paragraphs
$("div").find("p").addBack(".panel")     // union, then keep .panel

// end()   → previous set only (replace)
// addBack() → previous + current (union)
// andSelf() → old name — use addBack()

Need	Use
Previous + current	`.addBack()`
Previous only	`.end()`
Merge by argument	`.add(…)`
Filter after merge	`.addBack(selector)`
Legacy name	`.andSelf()` → migrate to `.addBack()`

Approach

How to Use `.addBack()`

Narrow the set, then pull the previous stack entry back in when you need both.

Start with a selection (e.g. $("li.third-item") or $("div.panel")).
Traverse with .nextAll(), .find(), .children(), etc. (pushes a new set).
Call .addBack() to union previous + current.
Optionally pass a selector: .addBack(".keep").
Chain styling or other methods on the combined set.

Piece	Required?	Role
Prior traversal	Yes	Something that pushed a new stack set
`.addBack()`	Yes	Merge previous stack entry with current
selector	Optional	Filter the union
Return value	—	New jQuery set (document order)

Pseudocode

call $(set).nextAll()   // or .find() / .children() …
  // stack: [original, narrowed]

call .addBack([selector])

result = union(previous stack set, current set)
if selector provided:
    result = result.filter(selector)
sort result in document order
return result as a new jQuery object

Reference

Cheat Sheet

Stack merge vs replace vs argument merge.

Topic	Detail
Syntax	`.addBack([selector])`
Since	jQuery 1.8
vs `.end()`	Union vs replace with previous
vs `.add()`	Stack previous vs pass new nodes
vs `.andSelf()`	Same idea; use `.addBack()`
Official list demo	`$("li.third-item").nextAll().addBack()`
DOM change?	No — collection only

Try it

Live Preview

Compare .nextAll() alone, with .addBack(), and with .end().

Official idea: nextAll + addBack keeps item 3 plus items 4 and 5.

Result

Ready — choose a call and click Run.

Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Official: `nextAll()` + `addBack()`

Keep the starting item and everything after it (jQuery API demo).

jQuery

$("li.third-item").nextAll().addBack().append(" [kept]");

Try It Yourself

How It Works

Start. Select the third list item.
Narrow. .nextAll() keeps only items 4 and 5.
Merge. .addBack() brings item 3 back into the set.
Result. Items 3–5 are marked together.

Example 2 — Official: `find("p")` + `addBack()`

Without .addBack(), only paragraphs match; with it, the parent joins too.

jQuery

// Without addBack — paragraphs only:
$("div.before").find("p").append(" [p]");

// With addBack — div + paragraphs:
$("div.after").find("p").addBack().append(" [both]");

Try It Yourself

How It Works

find. Moves from the div down to its paragraphs (new stack set).
Without. Only those paragraphs remain selected.
addBack. Unions the div back with its paragraphs.
Use. Style a container and its children in one chain.

Example 3 — `.addBack()` vs `.end()`

Union keeps both groups; .end() drops the narrowed set.

jQuery

var a = $("li.third-item").nextAll().addBack().length; // 3
var b = $("li.third-item").nextAll().end().length;     // 1
$("#out").text("addBack → " + a + "\\nend → " + b);

Try It Yourself

How It Works

Same start. Both chains begin at item 3, then call .nextAll().
addBack. Merges item 3 with 4 and 5 → length 3.
end. Pops back to only item 3 → length 1.
Pick. Need both groups? addBack. Need only the earlier set? end.

Example 4 — Optional Selector: `.addBack(".keep")`

Merge, then keep only elements that match the filter.

jQuery

$("li.start").nextAll().addBack(".keep").append(" [kept]");

Try It Yourself

How It Works

Traverse. .nextAll() builds the narrowed set.
Union. .addBack() would include the start item too.
Filter. The selector keeps only .keep elements from that union.
Same idea. Like merge first, then .filter(".keep").

Example 5 — `.addBack()` vs `.add()`

Stack previous set vs pass a new selector yourself.

jQuery

// Stack: previous selection comes from .find()
$("#a").find("p").addBack().append(" [stack]");

// Argument: you name the extra node yourself
$("#b").find("p").add("#b").append(" [arg]");

Try It Yourself

How It Works

addBack. Pulls the previous stack entry (#a) automatically.
add. You must pass "#b" (or a node) yourself.
Same goal. Often the same final set after .find().
Prefer. Use .addBack() when the previous set is already on the stack.

Edge Cases & Pitfalls

Stack mistakes that empty or surprise the set.

stack

Needs a prior traversal

Calling .addBack() with nothing on the stack to restore does not help. Use it after .find(), .nextAll(), etc.

end

Not the same as `.end()`

.end() discards the current set. .addBack() keeps both. Pick the wrong one and you lose nodes.

legacy

`.andSelf()` breaks on jQuery 3

Replace every .andSelf() with .addBack() before upgrading — the old method was removed.

filter

Selector filters the union

.addBack(".x") can drop the previous set if those elements do not match .x.

Compatibility

Browser Support

.addBack() has been part of jQuery since 1.8. It works in every browser that runs your loaded jQuery version (1.8+, 2.x, 3.x). Prefer it over legacy .andSelf().

✓ Stable · jQuery 1.8+

jQuery .addBack()

Supported across jQuery 1.8+, 2.x, and 3.x. Replaces .andSelf() from older codebases. Stack behavior is jQuery-specific.

100% With jQuery 1.8+

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

.addBack() Universal

Bottom line: Safe in any jQuery 1.8+ project. Replace legacy .andSelf() when migrating to jQuery 3.

Analysis

Performance Notes

Approach	Cost	Best for
`.addBack()`	Cheap	Reuse the previous stack set
`.addBack(sel)`	OK	Union + one filter pass
`.add(sel)` instead	May re-query	When previous set is not on the stack
Narrow start set	Faster	Prefer scoped roots before `.find()`

Prefer .addBack() after a traversal when the previous set is already known — it avoids selecting those elements again with a second query.

Remember

Key Takeaways

Role: union previous stack set with the current set.
vs end: keep both vs restore previous only.
Legacy: replace .andSelf() with .addBack().
Next: read .andSelf() only for legacy migration.

One line: after you narrow a set, .addBack() brings the previous selection back into the chain.

Frequently Asked Questions

What does jQuery .addBack() do?

.addBack() adds the previous set of elements on jQuery's internal traversal stack to the current set. Optionally pass a selector to keep only matching elements from that union. Available since jQuery 1.8.

How is .addBack() different from .end()?

.end() returns only the previous set — it replaces the current selection. .addBack() unions previous + current so both groups stay in one set for chaining.

How is .addBack() different from .add()?

.add() merges elements you pass as an argument (selector, DOM node, HTML, or jQuery object). .addBack() merges with the previous stack entry — no argument required unless you want a filter.

What about .andSelf()?

.andSelf() was the old name (jQuery 1.2). Deprecated in 1.8 when .addBack() was introduced, and removed in jQuery 3.0. Use .addBack() in all modern code.

What does .addBack(selector) do?

It merges previous and current sets, then filters the result so only elements matching the selector remain — like merging first, then .filter(selector).

When should I use .addBack()?

After a narrowing step such as .find(), .nextAll(), or .children() when you still need the earlier elements too — for example a list item plus everything after it, or a div plus its paragraphs.

Next: .andSelf() Method

Read the deprecated alias and how to migrate it to .addBack().

.andSelf() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery .add() Method jQuery .andSelf() Method

jQuery .addBack() Method

What Is .addBack()?

How to Use .addBack()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Official: nextAll() + addBack()

How It Works

Example 2 — Official: find("p") + addBack()

How It Works

Example 3 — .addBack() vs .end()

How It Works

Example 4 — Optional Selector: .addBack(".keep")

How It Works

Example 5 — .addBack() vs .add()

How It Works

Edge Cases & Pitfalls

Needs a prior traversal

Not the same as .end()

.andSelf() breaks on jQuery 3

Selector filters the union

Browser Support

jQuery .addBack()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.add()

.andSelf()

.end()

.nextAll()

.find()

Traversing hub

Next: .andSelf() Method

About the author

What Is `.addBack()`?

How to Use `.addBack()`

Example 1 — Official: `nextAll()` + `addBack()`

Example 2 — Official: `find("p")` + `addBack()`

Example 3 — `.addBack()` vs `.end()`

Example 4 — Optional Selector: `.addBack(".keep")`

Example 5 — `.addBack()` vs `.add()`

Not the same as `.end()`

`.andSelf()` breaks on jQuery 3