JavaScript splice() Method : Array Object

Last update on August 19 2022 21:50:38 (UTC/GMT +8 hours)

Description

The splice() method is used to remove old elements and add new elements to an array. It changes the content of the array.

Version

Implemented in JavaScript 1.2

Syntax

splice(startIndex, removeCount, element1,element2,..., elementN)

Parameters

startIndex: Index at which to start changing the array.

removeCount: An integer indicating the number of old array elements to remove. If removeCount is 0, no elements are removed. In this case, you should specify at least one new element.

element1,element2,.........,elementN : The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.

Example:

In the following web document splice() method is used to reproduce the fruits order.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<title>JavaScript splice() method example</title>
<style type="text/css">
h1 {color:red}
</style>
</head>
<body>
<h1>JavaScript : splice() method</h1>
<script src="array-splice-example1.js"></script>
</body>
</html>

JS Code

var fruitslist = new Array("Orange","Apple","Banana","Chery" );
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Fruits List : " + fruitslist); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 
var remove = fruitslist.splice(2, 0, "Mango");
var newParagraph1 = document.createElement("p"); 
var newText1 = document.createTextNode("After adding 'Mango' in 3rd place : " + fruitslist); 
newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1); 
var remove_fruit = fruitslist.splice(3, 1);
var newParagraph2 = document.createElement("p"); 
var newText2 = document.createTextNode("After removing 4th fruit, the new list is : " + fruitslist); 
newParagraph2.appendChild(newText2); 
document.body.appendChild(newParagraph2); 
var newParagraph3 = document.createElement("p"); 
var newText3 = document.createTextNode("Removed fruit is: " + remove_fruit); 
newParagraph3.appendChild(newText3); 
document.body.appendChild(newParagraph3); 
var removed_fruits = fruitslist.splice(0, 2,'Blackberry','Grapefruit','Guava');
var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("After replacing 1st and 2nd furits and adding 'Blackberry', 'Grapefruit', 'Guava', the new list is : " + fruitslist); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4); 

var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("Removed fruits are: " + removed_fruits); 
newParagraph5.appendChild(newText5); 
document.body.appendChild(newParagraph5);

View the example in the browser

Practice the example online

See the Pen array-splice-1 by w3resource (@w3resource) on CodePen.

Previous: JavaScript slice() Method: Array Object
Next: JavaScript sort() Method: Array Object