Splice Array in JavaScript

How to add or remove elements from an array using splice method in JavaScript?

Array splice() method

The array splice() method adds/removes the elements from an array and return the removed items. This method modifies the old array and returns the new length array by adding the new element/elements at the middle.

In JavaScript, by using splice() method we can add or remove element/elemets to an array.

EXAMPLE: Adding element to the middle of an array.

<p>Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = ["India", "Pakisthan", "Bangladesh", "China"];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
       a.splice(2, 0, "SriLanka", "Inodonesia");
        document.getElementById("myId").innerHTML = a;
    }
</script>

In the above code snippet we have given Id as "myId"to the second <p> element in the HTML code. There is a function myFunction() in the script code, which is connected to the onclick of the HTML button.

There is an array with value "["India", "Pakisthan", "Bangladesh", "China"]" to the variable a. We need to add the element/elements to the middle of an array, for that we are using splice() method in the script code. Onclick of the button "Click" in the HTML code fires the function myFunction() in the script code, at the same time splice() method adds the new input elemet to the middle of an array and returns the new length array as output.

OUTPUT

EXAMPLE: Adding the new elements at position 3 and removing the 2 elements.

<p>Click the button to remove and add a new element to the array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = ["India", "Pakisthan", "Bangladesh", "China", "Australia", "England"];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.splice(3, 2, "SriLanka", "Inodonesia");
        document.getElementById("myId").innerHTML = a;
    }
</script>

Remove 2 elements and add 2 new elements at position '3'

We need to remove the 2 elements and replace with the new elements at the position 3, for that we are using splice(3, 2, item1, item2). Onclick of the button removes the two elements at position and replace with the new elements.

OUTPUT

EXAMPLE: Adding the new element at position '1' by removing '1' element.

<p>Click the button to remove and add a new element to the array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = ["India", "Pakisthan", "Bangladesh", "China", "Australia", "England"];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.splice(1, 1, "SriLanka");
        document.getElementById("myId").innerHTML = a;
    }
</script>

Remove 1 element and add 1 new element at position '1'

We need to remove 1 element and add new element at first position, for that we are using splice(1, 1, item). Onclick of the button removes the element at the first position and adds the new element.

OUTPUT