How to Use jQuery .add() for Combining DOM Elements Like a Pro
Last updated 2 months, 1 week ago | 41 views 75 5
Introduction: Why jQuery .add() Matters
When building interactive websites, you'll often need to manipulate multiple DOM elements at once—even if they don’t share the same class or ID. Normally, this would require separate jQuery calls, but that’s inefficient.
That’s where the jQuery.add() method shines. It lets you combine different elements into a single jQuery object, so you can apply effects, classes, or events to all of them in one go.
If you’ve ever thought, “I wish I could select both this and that with one jQuery command”—.add() is your answer.
What is jQuery .add()?
The .add() method in jQuery is used to add more elements to an existing jQuery object. It returns a new jQuery object containing the original set of matched elements plus the newly specified ones.
✅ Syntax
$(selector).add(selector2[, context])
-
selector2: The elements to add to the current selection.
-
context (optional): A DOM element or jQuery object to use as the context for the selector.
Step-by-Step Explanation with Examples
1. Add Another Element by Selector
$('.box').add('#sidebar').css('border', '1px solid red');
This applies a red border to both
.boxand#sidebar.
2. Add Elements by DOM Object
let heading = document.getElementById('mainHeading');
$('.intro').add(heading).addClass('highlight');
Adds a CSS class to both
.introelements and the DOM element with IDmainHeading.
3. Add Using jQuery Object
let items = $('.item');
let specials = $('.special');
items.add(specials).fadeOut();
Both
.itemand.specialelements will fade out.
4. Using .add() in Chains
$('.btn-primary')
.add('.btn-secondary')
.add('.btn-tertiary')
.hide();
Hides all three button types with one chain.
5. With Context for Scoped Selection
$('.content').add('p', '.footer').css('color', 'blue');
Adds all
<p>elements inside.footerto the selection and changes text color.
✅ Complete Functional Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery .add() Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight { background: yellow; }
.box, #sidebar, .extra { padding: 10px; margin: 5px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h2 class="box">Main Box</h2>
<div id="sidebar">Sidebar</div>
<p class="extra">Extra paragraph</p>
<button id="highlightBtn">Highlight All</button>
<script>
$('#highlightBtn').click(function() {
$('.box')
.add('#sidebar') // Add the sidebar
.add('.extra') // Add the extra paragraph
.addClass('highlight'); // Apply highlight style
});
</script>
</body>
</html>
When the button is clicked, all three elements will be highlighted at once.
⚠️ Tips & Common Pitfalls
✅ Tips
-
Use
.add()to reduce code duplication when applying the same changes to multiple elements. -
Combine with chaining to keep your code clean and efficient.
-
.add()works best when selectors aren’t easily grouped by a common class or tag.
❌ Common Pitfalls
-
Forgetting to reassign the result of
.add()when chaining outside the main jQuery chain. -
Expecting
.add()to mutate the original jQuery object—it returns a new one. -
Using
.add()unnecessarily when a comma-separated selector would suffice:$('.box, #sidebar').addClass('highlight'); // often better
jQuery .add() vs Comma-separated Selector
| Feature | .add() |
Comma-separated Selector |
|---|---|---|
| Adds dynamically | ✔ Yes | ❌ No |
| Used in chaining | ✔ Yes | ✅ Yes |
| More readable for simple cases | ❌ No | ✔ Yes |
| Returns new jQuery object | ✔ Yes | ✅ Yes |
Conclusion: When and How to Use .add() Effectively
The jQuery .add() method is a powerful, underused tool for combining and manipulating multiple elements—especially when they aren’t easily grouped.
Use .add() when:
-
You’re dealing with dynamically determined DOM nodes.
-
You want to chain actions across unrelated selectors.
-
You prefer more readable, maintainable jQuery code over multiple separate calls.
Keep in mind that for simpler scenarios, a comma-separated selector may be faster and clearer. But when you need to combine jQuery objects or DOM references dynamically, .add() is your best friend.
