JQuery | merge() method

Last Updated : 27 Apr, 2020

This merge() Method in jQuery is used to merge the contents of two arrays together into the first array.

Syntax:

jQuery.merge( first, second )

Parameters: The merge() method accepts only one parameter that is mentioned above and described below:

first : This parameter is the first array-like object to merge, the elements of second added.
second : This parameter is the second array-like object to merge into the first, unaltered.

Return Value: It returns the merged array.

Example 1: In this example, the merge() Method merges only two arrays .

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery | merge() method</title>  
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
  
</head> 
<body style="text-align:center;">  
      
    <h1 style="color: green">  
        GeeksForGeeks  
    </h1>  
      
    <h3>JQuery | merge() method</h3> 
      
    <b>First = [ "a", "b", "c" ]</b><br> 
    <b>Second = [ "d", "e", "f" ]</b> 
    <br> 
    <p>Click on button to merge</p> 
    <button onclick="geek()">Click</button> 
    <br><br> 
    <b id="geeks"></b> 
      
    <script> 
    function geek() { 
        var first = [ "a", "b", "c" ]; 
        var second = [ "d", "e", "f" ]; 
        var n = $.merge(first, second ); 
        document.getElementById("geeks").innerHTML = "Merged : [" + n + "]"; 
    } 
    </script> 
</body> 
</html>                                                                                                     

Output:
Before Click:

After Click:

Example 2: In this example, the merge() Method merges more than two array.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery | merge() method</title>  
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
  
</head> 
<body style="text-align:center;">  
      
    <h1 style="color: green">  
        GeeksForGeeks  
    </h1>  
      
    <h3>JQuery | merge() method</h3> 
      
    <b>Array_1 = [ "a", "b", "c" ]</b><br> 
    <b>Array_2 = [ "d", "e", "f" ]</b>    <br> 
    <b>Array_3 = [ 1, 2, 4, 5 ]</b>    <br> 
    <b>Array_4 = [ 3, 6, 9 ]</b><br> 
    <b>Array_5 = [ ]</b> 
    <br> 
    <p>Click on button to merge</p> 
    <button onclick="geek()">Click</button> 
    <br><br> 
    <b id="geeks"></b> 
      
    <script> 
    function geek() { 
        var fi = [ "a", "b", "c" ]; 
        var se = [ "d", "e", "f" ]; 
        var th = [ 1, 2, 4, 5 ]; 
        var fo = [ 3, 6, 9 ]; 
        var fif = []; 
        var n = $.merge( 
th, $.merge($.merge(fif, $.merge(fi, se )), fo)); 
  
        document.getElementById( 
"geeks").innerHTML = "Merged : [" + n + "]"; 
    } 
    </script> 
</body> 
</html>                                                 