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++"];
document.getElementById("demo").innerHTML = languages;
function languages_function() {
languages.splice(1, 0, "HTML", "CSS");
document.getElementById("demo").innerHTML = languages;
}
<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>