How to append an element in an array in JavaScript? - GeeksforGeeks

06 Mar, 2019
There are several methods for adding new elements to a JavaScript array.
push(): The push() method will add an element to the end of an array, while its twin function, the pop() method, will remove an element from the end of the array. If you need to add an element or multiple elements to the end of an array, the push() method will almost always be your simplest and quickest option.Syntax:array.push(item1, item2, ..., itemX)Parameter: item1, item2, ..., itemX: These are required parameters. The item(s) to the end of the array.Example:<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.push("Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>Output:Before Click on the Button:After Click on the Button:
Syntax:
array.push(item1, item2, ..., itemX)
Parameter: item1, item2, ..., itemX: These are required parameters. The item(s) to the end of the array.
Example:
<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.push("Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>
Output:
Before Click on the Button:
After Click on the Button:
unshift(): The unshift() method will add an element to the beginning of an array, while its twin function, shift(), will remove one element from the beginning of the array.Syntax:array.unshift(item1, item2, ..., itemX)Parameter: item1, item2, ..., itemX: These are required parameters. The item(s) to add to the beginning of the array.Example:<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.unshift("Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>Output:Before Click on the Button:After Click on the Button:
array.unshift(item1, item2, ..., itemX)
Parameter: item1, item2, ..., itemX: These are required parameters. The item(s) to add to the beginning of the array.
Example:
<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.unshift("Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>
Output:
Before Click on the Button:
After Click on the Button:
splice(): The splice() method modifies the content of an array by removing existing elements and/or adding new elements.Syntax:array.splice(index, howmany, item1, ....., itemX)Parameter:index: This is required parameter. An integer that specifies at what position to add/remove items, Use negative values to specify the position from the end of the arrayhowmany: This is Optional parameter. The number of items to be removed. If set to 0, no items will be removed.item1, item2, ..., itemX: These are Optional parameters. The new item(s) to be added to the array.Example:<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.splice(2, 1, "Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>Output:Before Click on the Button:After Click on the Button:
Syntax:
array.splice(index, howmany, item1, ....., itemX)
Parameter:
index: This is required parameter. An integer that specifies at what position to add/remove items, Use negative values to specify the position from the end of the array
howmany: This is Optional parameter. The number of items to be removed. If set to 0, no items will be removed.
item1, item2, ..., itemX: These are Optional parameters. The new item(s) to be added to the array.
Example:
<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];        document.getElementById("geeks").innerHTML = Geeks;        function GFG() {          Geeks.splice(2, 1, "Geeks5", "Geeks6");          document.getElementById("geeks").innerHTML = Geeks;        }        </script>        </center></body></html>
Output:
Before Click on the Button:
After Click on the Button:
concat(): The concat() method returns a new combined array comprised of the array on which it is called, joined with the array (or arrays) from its argument.This method is used to join two or more arrays and this method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.Syntax:array1.concat(array2, array3, ..., arrayX)Parameter:array2, array3, ..., arrayX: These are required parameters. The arrays to be joined.Example:<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        function GFG() {          var g1 = ["Geeks1", "Geeks2"];          var g2 = ["Geeks3", "Geeks4"];          var g3 = ["GeeksForGeeks"];          var g4 = g1.concat(g2, g3);           document.getElementById("geeks").innerHTML = g4;        }        </script>        </center></body></html>Output:Before Click on the Button:After Click on the Button:
Syntax:
array1.concat(array2, array3, ..., arrayX)
Parameter:
array2, array3, ..., arrayX: These are required parameters. The arrays to be joined.
Example:
<!DOCTYPE html><html><body>    <center>        <h1>GeeksForGeeks</h1>        <button onclick="GFG()">Click</button>        <p id="geeks"></p>        <script>        function GFG() {          var g1 = ["Geeks1", "Geeks2"];          var g2 = ["Geeks3", "Geeks4"];          var g3 = ["GeeksForGeeks"];          var g4 = g1.concat(g2, g3);           document.getElementById("geeks").innerHTML = g4;        }        </script>        </center></body></html>
Output:
Before Click on the Button:
After Click on the Button:
javascript-array
Picked
Web-Programs
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Node.js | fs.writeFileSync() Method
Remove elements from a JavaScript Array
Set the value of an input field in JavaScript
How to read a local text file using JavaScript?
How to Use the JavaScript Fetch API to Get Data?
Form validation using HTML and JavaScript