Skip to content
Related Articles

Related Articles

jQuery | extend() method
  • Last Updated : 10 May, 2020
GeeksforGeeks - Summer Carnival Banner

This extend() Method in jQuery is used to merge the contents of two or more objects together into the first object.

Syntax:

jQuery.extend( [deep ], target, object1 [, objectN ] )

Parameters: The extend() method accepts four parameter that is mentioned above and described below:

  • deep: This parameter is the merge becomes recursive .
  • target: This parameter is the object to extend. It will receive the new properties.
  • object1: This parameter is the object containing additional properties to merge in.
  • object1: This parameter is an additional objects containing properties to merge in.

Return Value: It returns the object after merging.

Below examples illustrate the use of extend() method in jQuery:



Example 1: In this example, the extend() method merge two objects in one.




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery | extend() method</title
</script>
  
</head>
<body style="text-align:center;"
      
    <h1 style="color: green"
        GeeksForGeeks 
    </h1
      
    <h3>JQuery | extend() method</h3>
    <p>Merge two objects in One object.</p>
    <p id = "geeks"> </p>
    <script>
        var value1 = {
          geeks1: 0,
          geeks2: { topic1: 52, topic2: 100 },
          geeks3: 97
        };
        var value2 = {
          geeks2: { topic1: 200 },
          geeks4: 100
        };
           
        // Merge value2 into value1
        $.extend( value1, value2 );
           
        // Assuming JSON.stringify - not available in IE<8
        $( "#geeks" ).append( JSON.stringify( value1 ) );
    </script>
</body>
</html>                                                            

Output:

Example 2: In this example, the extend() method merge two objects, without modifying any object.




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery | extend() method</title
  
</head>
<body style="text-align:center;"
      
    <h1 style="color: green"
        GeeksForGeeks 
    </h1
      
    <h3>JQuery | extend() method</h3>
    <p>Merge two objects, without modifying any object.</p>
    <p id = "geeks"> </p>
    <script>
        var Object_1 = { bool_Val: false, num: 5, name: "shubham" };
        var Object_2 = { bool_Val: true, name: "SHUBHAM" };
           
        // Merge Object_1 and Object_2, without modifying Object_1
        var Object_3 = $.extend( {}, Object_1, Object_2 );
           
        // Assuming JSON.stringify - not available in IE<8
        $( "#geeks" ).append(
 "<b>Object_1 : </b>" + JSON.stringify( Object_1 ) + "<br>" );
        $( "#geeks" ).append(
 "<b>Object_2 : </b>" + JSON.stringify( Object_2 ) + "<br>" );
        $( "#geeks" ).append(
 "<b>Object_3 : </b>" + JSON.stringify( Object_3 ) + "<br>" );
    </script>
</body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :