How To Use Array Splice Function In JavaScript With Example

Posted By Bajarangi soft , Posted On 25-09-2020

when you want to insert new element at the any of position in an array you can use splice method it will helps to add new elements at the any position in an array so toady we are going to discuss how to add new elements to an array in java script

How To Use Array Splice Function In JavaScript With Example

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Syntax and Usage

array.splice(index, index_to_remove, item1, ....., itemX)

Parameter Values

index ->    Required. An integer that specifies at what position to add/remove items, Use negative values to specify the position
            from the end of the array
index to remove -> Optional. The number of items to be removed. If set to 0, no items will be removed
            item1, ..., itemX  Optional. The new item(s) to be added to the array

Let's Start

Example(1)

1.Create array

var languages = ["PHP", "JAVASCRIPT", "PYTHON", "C++"];

2.Implement code to add new elements at position 1

document.getElementById("demo").innerHTML = languages;

function languages_function() {
    languages.splice(1, 0, "HTML", "CSS");
    document.getElementById("demo").innerHTML = languages;
}

Example(2)

<script>
    var languages = ["PHP", "JAVASCRIPT","PYTHON", "C++"];
    document.getElementById("demo").innerHTML = languages;

    function languages_function() {
        languages.splice(2, 1, "HTML", "CSS");
        document.getElementById("demo").innerHTML = languages;
    }
</script>

In above example At position 2, add the new items, and remove 1 item

Example(3)

<script>
    var languages = ["PHP", "JAVASCRIPT","PYTHON", "C++"];
    document.getElementById("demo").innerHTML = languages;

    function languages_function() {
        languages.splice(2, 2, "HTML", "CSS");
        document.getElementById("demo").innerHTML = languages;
    }
</script>

In above example At position 2, add the new items, and remove 2 item

Complete code for Array Splice Function In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Array Splice Function In JavaScript With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>Use Array Splice Function In JavaScript </h1>
    </div>
    <br>
    <div class="well">
        <button class="btn btn-primary" onclick="languages_function()">Click it</button>
        <h1 id="demo"></h1>
    </div>
    <br>
</div>
</body>
</html>

<script>
    var languages = ["PHP", "JAVASCRIPT","PYTHON", "C++"];
    document.getElementById("demo").innerHTML = languages;

    function languages_function() {
        languages.splice(1, 0, "HTML", "CSS");
        document.getElementById("demo").innerHTML = languages;
    }
</script>

Related Post