Updated April 18, 2023
Introduction to JavaScript Append to Array
Append to Array in JavaScript is an operation in which the new array elements are added to the end or start of an existing array defined in JavaScript. This operation is carried out on the existing array, which is already defined, and it may contain some elements or not any, and the user wants to add new values or array elements into it. JavaScript provides multiple methods on array objects to perform such operations as these objects inherit from the prototype object as parent. All the Array objects inherit from the Array.prototype. We can use the methods from the prototype to append or modify the array objects directly.
Syntax:
arr.push(item1, item2, .... , itemN);This method will append the elements specified to the end of the array. One or more than one element can be appended using the push() method.
arr.unshift(item1, item2, .... , itemN);This method will append an element specified to the beginning of the array. More than one element can be appended using unshift() operation.
arr.concat(arr1, arr2, .... , arrN);This method will concatenate the arrays specified with the original array and return the newly formed combined array.
How does JavaScript Append to Array Works?
Given below shows the working:
1. push()
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Append to Array
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.resultText {
display: none;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Append to Array </h2>
<p> Click on button to append the elements </p>
</div>
<div class = "list" >
<p> Existing Number list: </p>
<ul>
<li id = "existing" > </li>
</ul>
<button type = "submit" value = "submit" onclick = "appendUsingPush()"> Append Elements </button>
</div>
<div class = "resultText">
<p> Modified Number list: </p>
<ul>
<li id = "modified" > </li>
</ul>
</div>
</div>
<script type = "text/javascript">
var numbers = [ "one" , "two" , "three" , "four"];
document.getElementById("existing").innerHTML = numbers;
function appendUsingPush() {
numbers.push( "Five" );
numbers.push( "Six", "Seven" );
document.getElementsByClassName("resultText")[0].style.display = "block";
document.getElementById("modified").innerHTML = numbers;
}
</script>
</body>
</html>Output:
2. unshift()
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Append to Array
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.resultText {
display: none;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Append to Array </h2>
<p> Click on button to append the elements </p>
</div>
<div class = "list" >
<p> Existing Number list: </p>
<ul>
<li id = "existing" > </li>
</ul>
<button type = "submit" value = "submit" onclick = "appendUsingPush()"> Append Element </button>
</div>
<div class = "resultText">
<p> Modified Number list: </p>
<ul>
<li id = "modified" > </li>
</ul>
</div>
</div>
<script type = "text/javascript">
var numbers = [ "one" , "two" , "three" , "four"];
document.getElementById("existing").innerHTML = numbers;
function appendUsingPush() {
numbers.unshift("Five" );
document.getElementsByClassName("resultText")[0].style.display = "block";
document.getElementById("modified").innerHTML = numbers;
}
</script>
</body>
</html>Output:
3. concat()
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Append to Array
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list li {
margin: 8px 0 0 0;
list-style: inside;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.resultText {
display: none;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Append to Array </h2>
<p> Click on button to append the elements </p>
</div>
<div class = "list" >
<p> First Number list: </p>
<ul>
<li id = "existing1" > </li>
</ul>
<p> Second Number list: </p>
<ul>
<li id = "existing2" > </li>
</ul>
<button type = "submit" value = "submit" onclick = "appendUsingPush()"> Append Element </button>
</div>
<div class = "resultText">
<p> Combined Number list: </p>
<ul>
<li id = "modified" > </li>
</ul>
</div>
</div>
<script type = "text/javascript">
var numbers1 = [ "one" , "two" , "three" , "four"];
document.getElementById("existing1").innerHTML = numbers1;
var numbers2 = [ 1, 2, 3, 4];
document.getElementById("existing2").innerHTML = numbers2;
function appendUsingPush() {
document.getElementsByClassName("resultText")[0].style.display = "block";
var combined = numbers1.concat( numbers2 );
document.getElementById("modified").innerHTML = combined;
}
</script>
</body>
</html>Output:
Conclusion
JavaScript append is an operation where new elements are added to the existing array elements. JavaScript provides multiple methods for performing append operations in different ways. Prototype push method appends element at the end, unshift method appends element at the beginning, and concat method is used to combine multiple arrays.
Recommended Articles
This is a guide to JavaScript Append to Array. Here we discuss the introduction and how does JavaScript append works? You may also have a look at the following articles to learn more –
