jQuery jQuery.merge() Method

What You’ll Learn

The jQuery.merge() utility appends every element from a second array-like collection onto the end of the first. This tutorial covers syntax, destructive vs safe merge patterns, five worked examples, comparisons with Array.concat() and $.extend(), and when duplicates are preserved.

Introduction

Combining two lists of data is a daily task — paginated API results, selected checkboxes, or DOM node collections converted to arrays. jQuery provides jQuery.merge() (also written $.merge()) to append one array-like collection onto another while preserving element order.

Unlike jQuery.extend(), which merges object properties by key, $.merge() works on indexed collections. It is the jQuery-era counterpart to appending arrays — with one important caveat: the first array is modified in place.

Understanding the jQuery.merge() Method

jQuery.merge(first, second) copies each element from second and appends it to first. The method updates first.length and returns the same first reference. second is never altered.

Duplicate values are not deduplicated — if both arrays contain 2, the result contains 2 twice. Choose $.merge() when you want a fast in-place append; choose Array.concat() or the clone pattern when immutability matters.

📝 Syntax

General form of jQuery.merge:

jQuery.merge( first, second )
// or
$.merge( first, second )

Parameters

• first — the first array-like object. Elements from second are appended here. This object is modified.
• second — the second array-like object. Its elements are appended to first without changing second itself.

Return value

• Returns the modified first array (same reference, now longer).

Minimal workflow

var list = [1, 2, 3];
$.merge(list, [4, 5]);

console.log(list); // [1, 2, 3, 4, 5]

Examples Gallery

Each example uses $.merge(). Open DevTools or use the Try-it links to run them interactively.

var first = [0, 1, 2];
$.merge(first, [2, 3, 4]);

console.log(first); // [0, 1, 2, 2, 3, 4]

[0, 1, 2, 2, 3, 4]

var first = [3, 2, 1];
$.merge(first, [4, 3, 2]);

console.log(first); // [3, 2, 1, 4, 3, 2]

[3, 2, 1, 4, 3, 2]

var original = ["a", "b", "c"];
var copy = $.merge([], original);

console.log(copy);       // ["a", "b", "c"]
console.log(copy === original); // false

["a", "b", "c"]
false

var first  = ["a", "b", "c"];
var second = ["d", "e", "f"];

var combined = $.merge($.merge([], first), second);

console.log(combined);              // ["a","b","c","d","e","f"]
console.log(first);                   // ["a","b","c"]  (unchanged)
console.log(second);                  // ["d","e","f"]  (unchanged)

combined: ["a","b","c","d","e","f"]
first: ["a","b","c"]
second: ["d","e","f"]

var allRows = ["Row 1", "Row 2"];
var page2   = ["Row 3", "Row 4"];
var page3   = ["Row 5"];

$.merge(allRows, page2);
$.merge(allRows, page3);

console.log(allRows.join(" | "));
// "Row 1 | Row 2 | Row 3 | Row 4 | Row 5"

Row 1 | Row 2 | Row 3 | Row 4 | Row 5

🚀 Common Use Cases

• Paginated data — accumulate rows from multiple API pages into one list.
• Shallow clone — $.merge([], arr) when you need a quick array copy in legacy jQuery code.
• Batch DOM results — combine arrays built from separate DOM queries or $.makeArray() conversions.
• In-place accumulation — grow a working buffer without allocating a new array each iteration.
• Plugin internals — jQuery itself uses merge patterns when combining collections.
• Non-destructive combine — nested empty-array merge when both sources must stay unchanged.

📝 Notes

• Available since jQuery 1.0; array-like arguments supported throughout modern jQuery.
• Prior to jQuery 1.4, arguments had to be true arrays — use $.makeArray() to convert NodeLists or other collections.
• $.merge() performs a shallow copy of references — nested objects inside elements are not cloned.
• Do not confuse with $.extend() — that merges object keys, not array indices.
• For deduplication, merge first then filter — $.merge does not remove duplicates.
• Modern code often prefers [...a, ...b] or a.concat(b) for immutable merges.

💡 Best Practices