Learn The Working Of The JQuery Array Push() Function - EduCBA

Home » Add Element Jquery Array » Learn The Working Of The JQuery Array Push() Function - EduCBA

Maybe your like

Updated April 3, 2023

jQuery array push

 

 

Introduction to jQuery array push

jQuery array push() function is used to add one or more elements into an array. The array push() function is a built-in function in jQuery.  The array push() function pushes one or more elements to the end of an array and returns the new length of an array, with the help of the array push() function the adding elements to an array becomes very easy.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

Syntax:

array.push( [element1[, ... [, elementN] ] ] );

Parameters –

element – This is not an optional parameter, that specifies one or more elements to add to the end of an array.

Return value –

The return value of this method is number, which represents the new length of an array.

Working of the JQuery array push() function

The array push() function accepts one or more elements to add to an array on which it is called and returns the length of the new array. For example consider an array arr = [1, 2, 3] which has three elements, and now we push one more element to this array as “arr.push(56). The New array will be arr = [1, 2, 3, 56] whose length is four.

Examples for the jQuery array push() function

Here are the following examples mention below

Example #1

Example to add one or more elements to an array –

Program –

<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script> <title> This is an example for jQuery array push() function </title> <script> var city = [ "Bangalore", "Delhi", "Mumbai", "Hyderabad" ]; function disp() { document.getElementById("display").innerHTML = city; } document.getElementById("display").innerHTML = city; function addArr() { city.push("Agra"); city.push("Pune", "Chennai", "Kolkata"); document.getElementById("display").innerHTML = city; } </script> </head> <body > <p> Push new element(s) to an array : </p> <button onclick = "disp()"> Display Array </button> <br> <p id = "display" style = "color:green; "> </p> <button onclick = "addArr()"> Push Element(s) </button> </body> </html>

Output –

jQuery array push output 1

Once we click on the first button, the output is –

jQuery array push output 2

When we click on the second button, the output is –

jQuery array push output 3

In the above code, the city array is created that has some name of the cities, which gets displayed when the “Display Array” button click. Next in the addArr() function, one or more cities are added to the end of the city array and displaying the array. The addArr() function executes when the “Push Elements” button clicked.

Example #2

Example to add different types of elements to an array and display the return value of the push() function –

Program –

<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script> <title> This is an example for jQuery array push() function </title> <script> var numbers = [ 23, 45, 65, 20, 68 ]; function disp() { alert("The Array is : "+ numbers); } function addArr() { var len = numbers.push("Hello", 45.89, false); alert("The New Array is : "+ numbers +" And the length of the new array is : "+ len); } </script> </head> <body > <p> Push new element(s) to an array : </p> <button onclick = "disp()"> Display Array </button> <button onclick = "addArr()"> Push Elements </button> </body> </html>

Output –

jQuery array push output 4

Once we click on the “Display Array” button, the output is –

output 5

When we click on the “Push Elements” button, the output is –

output 6

In the above code, the number array is created that has some numbers, which gets displayed when the “Display Array” button click. Next in the addArr() function the different data types of elements are added to the end of the array and display the new length of the array. The addArr() function executes when the “Push Elements” button is clicked.

Example #3

Example to add one or more elements to an array of objects –

Program –

<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script> <title> This is an example for jQuery array push() function </title> <script> // Create a Javascript object to add array into it var Obj = { array1: [ 'One', 'Two', 'Three' ], array2: [] }; // new array to push var arr = [ 'Four', 'Five', 'Six' ]; function disp() { document.getElementById("demo").innerHTML = "The object of array2 is : "+ Obj.array2; } function addArr() { var l = Obj['array2'].push(arr); document.getElementById("demo").innerHTML = "The New Array is : "+ Obj.array2; } </script> </head> <body > <p> Push new element(s) to an array : </p> <button onclick = "disp()"> Display Array </button> <button onclick = "addArr()"> Push Elements </button> <p id = "demo" style = "color:red; "> </p> </body> </html>

Output –

output 7

Once we click on the first button, the output is –

output 8

Now, click on the second button

output 9

And then click on the first button. This time the event will not generate.

output 10

In the above code, the object is created which has multiple sub-arrays, and farther the new array is created that has some elements. The new array is pushed to the array of the object by using the array push() function, as we can see in the above output.

Conclusion

The jQuery array push() function is a built-in function in jQuery, which is used to push one or more elements to the end of an array.

Recommended Articles

This is a guide to jQuery array push. Here we discuss the Working of the JQuery array push() function along with the examples and outputs. You may also have a look at the following articles to learn more –

  1. jQuery Select Option
  2. jQuery UI Droppable
  3. JQuery attr()
  4. jQuery UI Selectmenu

Tag » Add Element Jquery Array