push() Method in JavaScript-JS Tutorial-php.cn

push() Method in JavaScript

王林

Release： 2024-07-18 16:50:11

Original

566 people have browsed it

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);

Copy after login

*Example 1.: *

const fruits = ["Apple", "Banana"];
fruits.push("Orange", "Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Orange", "Mango"]

Copy after login

*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>

Copy after login

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;
        }

Copy after login

Image description

The above is the detailed content of push() Method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!