Updated April 3, 2023
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.
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 –
Once we click on the first button, the output is –
When we click on the second button, the output is –
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 –
Once we click on the “Display Array” button, the output is –
When we click on the “Push Elements” button, the output is –
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 –
Once we click on the first button, the output is –
Now, click on the second button
And then click on the first button. This time the event will not generate.
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 –
