The push() method in JavaScript adds one or more elements to the end of an array. This method modifies the original array and returns the new length of the array.
Syntax :
array.push(element1, element2, ..., elementN);
*Example 1.: *
const fruits = ["Apple", "Banana"];
fruits.push("Orange", "Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Orange", "Mango"]
*Example 2.: *
How to Dynamically Add Elements Using the push() Method
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h2>Fruit List</h2>
<input type="text" id="addEle" placeholder="Enter fruit name..." />
<button onclick="AddEle()">Add Element</button>
<h4 id="ans"></h4>
</div>
<script>
function AddEle() {
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango", "Strawberry"];
const NewVal = document.getElementById("addEle").value;
if (NewVal === "") {
alert("Please Enter Fruit Name..!");
} else {
fruits.push(NewVal);
document.getElementById("ans").innerHTML = fruits.join(", ");
document.getElementById("addEle").value = "";
}
}
</script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
#container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
h2 {
text-align: center;
}
input[type="text"] {
width: calc(100% - 24px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
h4 {
margin-top: 20px;
color: #555;
}
Top comments (0)