JavaScript array push Method is added a new element in the array and returns an updated new length. The new element will be added ad the end of the JS Array. This method will also change the array length property.
Syntax
Simple syntax of adding an element in an array using push() method.
array.push(element1, element2, ..., elementX)Parameters
elementN – The elements which will add in the array (at the end).
Return value
A new array length property based on which method called.
JavaScript array push example
Let’s see the example of the Add element to Array JavaScript. In the example, We have one array with 3 fruit as an element. Now you want to add one more fruit to the list.
For adding new element (fruit) in the array we create a function– “myFunction()”. The function using an Array push method. To trigger this function we implement one button.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add a new Fruit</button>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Banana", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Output: In the gif file, click on the adding button. Array showed in p tag, how the new item is added. If you click more than once it will also be added to the array.
How to Add Multiple Items in an Array
In an upper example, you see only ad single item at a time in Array. Adding a Multiple Item in the
var a = [];
a.push(1, 2, 3);Complete code example:-
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add a new Fruit</button>
<p id="demo"></p>
<script>
var fruits = ["Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Banana", "Mango","Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>Output:
JavaScript array push key value
You have a key-value pair element array then still you can use the push() method. See the below JavaScript array push key-value pair code snippet.
items=[{'id':1},{'id':2},{'id':3},{'id':4}];
items.push({'id':5});JavaScript push array into an array
Does is it possible in JavaScript array push array?
Yes, it’s possible using a for a loop. Like the below code line.
for(var i = 0; i<Length; i++){
arr1.push(arr2[i]);
}Complete code: You have to count the length of the array and run the for loop statement. It will iterate every element of the array. Just use the push method to add every element from another array the same way until all elements are counted.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add a new item</button>
<p id="demo"></p>
<script>
arr1=[1,2];
document.getElementById("demo").innerHTML = arr1;
function myFunction() {
arr2 = [3,4]
var count = arr2.length;
for(var i = 0; i<count; i++){
arr1.push(arr2[i]);
}
document.getElementById("demo").innerHTML = arr1;
}
</script>
</body>
</html>Output:
Question: How to JavaScript array push front?
Answer: To add items at the beginning (front/start) of a js array, use the unshift() method. See below the code line for it.
array.unshift("element")Bonus: How to Remove the last element from the
And for all type methods to remove elements follow this Link – https://tutorial.eyehunts.com//js/remove-element-from-array-javascript-first-last-value-key-index/
Do comment if you have any doubts and suggestions on this tutorial.
Note: The All Javascript array push method Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version