jQuery merge() method

The jQuery merge() method together merges the content of two arrays into the first array. This method returns the merged array.

The merge() method forms an array containing the elements of both arrays. If we require the first array, we should copy it before calling the merge() method.

Syntax

The commonly used syntax of using the merge() method is given as follows.

This method accepts two parameters that are defined as follows -

first: This parameter specifies the first array. It is used for merging and contains the content of the second array after merging.

second: This parameter specifies the second array. It also uses for merging, but it will not be modified.

Now, let's understand the merge() method by using some illustrations.

Example1

In this example, there are two arrays named arr1 and arr2. We are using jQuery's merge() method to merge both arrays. On clicking the given button, we will get the merged array. The merged array will be the modified first array.

<!DOCTYPE html>
<html>
<head>
<title> jQuery merge() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>
<body>

<h4> It is an example of using the merge() method. </h4>
<p id = "p1"> <b> First array arr1 is: </b> </p>
<p id = "p2"> <b> Second array arr2 is: </b> </p>
<h4> Click the following button to perform merging. </h4>
<button> Click me </button>
<p id = "p3"> <b> Merged array: </b> </p>
<script>
$(document).ready(function() {
$("button").click(function() {
var arr1 = [ "Welcome", "to", "the" ];  
var arr2 = [ "javaTpoint", ".", "com" ];
$( "#p1" ).append( JSON.stringify( arr1 ));
$( "#p2" ).append( JSON.stringify( arr2 ));
$.merge( arr1, arr2 );
$( "#p3" ).append( JSON.stringify( arr1 ));
});
});
</script>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

It is another example of using the merge() method. Here, we are merging more than two arrays into the first array. Here, there are four arrays named arr1, arr2, arr3 and arr4. On clicking the given button, all four arrays will merge into the single one, and the method will return the merged array. The merged array will be the modified first array.

<!DOCTYPE html>
<html>
<head>
<title> jQuery merge() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>
<body>

<h4> It is an example of using the merge() method. </h4>
<p id = "p1"> <b> First array arr1 is: </b> </p>
<p id = "p2"> <b> Second array arr2 is: </b> </p>
<p id = "p3"> <b> Third array arr3 is: </b> </p>
<p id = "p4"> <b> Fourth array arr4 is: </b> </p>
<h4> Click the following button to perform merging. </h4>
<button> Click me </button>
<p id = "merge"> <b> Merged array: </b> </p>
<script>
$(document).ready(function() {
$("button").click(function() {
var arr1 = [ "Welcome", "to", "the" ];  
var arr2 = [ "javaTpoint", ".", "com" ];
var arr3 = [ "1", "2", "3" ];
var arr4 = [ "4", "5", "6" ];
$( "#p1" ).append( JSON.stringify( arr1 ));
$( "#p2" ).append( JSON.stringify( arr2 ));
$( "#p3" ).append( JSON.stringify( arr3 ));
$( "#p4" ).append( JSON.stringify( arr4 ));
$.merge( arr2, $.merge( arr1, $.merge( arr3, arr4 )));
$( "#merge" ).append( JSON.stringify( arr2 ));
});
});
</script>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example3

In this example, we are merging the arrays, but also using a copy, so the original array will not be altered. In the output, we can see both arrays aren't altered after merging.

<!DOCTYPE html>
<html>
<head>
<title> jQuery merge() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>
<body>

<h4> It is an example of using the merge() method. </h4>
<p id = "p1"> <b> First array arr1 is: </b> </p>
<p id = "p2"> <b> Second array arr2 is: </b> </p>
<h4> Click the following button to perform merging. </h4>
<button> Click me </button>
<p id = "merge"> <b> Merged array: </b> </p>
<p id = "p4"></p>
<script>
$(document).ready(function() {
$("button").click(function() {
var arr1 = [ "Welcome", "to", "the" ];  
var arr2 = [ "javaTpoint", ".", "com" ];
$( "#p1" ).append( JSON.stringify( arr1 ));
$( "#p2" ).append( JSON.stringify( arr2 ));
var n = $.merge( $.merge( [], arr1), arr2);
$( "#merge" ).append( JSON.stringify( n ));
$( "#p4" ).html(" <b> arr1 after merging: </b> " + arr1 + "<br> <b> arr2 after merging: </b> " + arr2 );
});
});
</script>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -