Summary of methods for adding elements to JS arrays-JS Tutorial-php.cn

Summary of methods for adding elements to JS arrays

韦小宝

Release： 2018-01-26 11:05:22

Original

4032 people have browsed it

This article introduces how to add new elements to JSarrays, using different methods to add elements to JS arrays. Arrays are very commonly used in JSdata One of the types, and operating on arrays is one of the basics we must know.

Let’s take a look at the methods to add elements to JS arrays!

Add new elements at the beginning of the array - unshift()
Test code:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script> 
<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>
</body>
</html>

Copy after login

Test results :

Lemon,Pineapple,Banana,Orange,Apple,Mango

Copy after login

Add an element at position 2 of the array - splice()
Test code:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

Copy after login

Test result:

Banana,Orange,Lemon,Kiwi,Apple,Mango

Copy after login

Add a new element to the end of the array - push()
Test code:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

Copy after login

Test results: