Il existe plusieurs méthodes pour ajouter nouveaux éléments au tableau JavaScript. Nous allons les définir.
<!DOCTYPE html>
<html>
<body>
<p>Cliquez sur le bouton et ajoutez un nouvel élément au tableau.</p>
<button onclick="myFunction()">Cliquez</button>
<p id="demo"></p>
<script>
var colors = ["Orange", "Red", "Blue"];
document.getElementById("demo").innerHTML = colors;
function myFunction() {
colors.push("Green");
document.getElementById("demo").innerHTML = colors;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Cliquez sur le bouton pour ajouter des nouveaux éléments au début du tableau.</p>
<button onclick="myFunction()">Cliquez</button>
<p id="demo"></p>
<script>
var colors = ["Orange", "Red", "Blue"];
document.getElementById("demo").innerHTML = colors;
function myFunction() {
colors.unshift("Black", "Green");
document.getElementById("demo").innerHTML = colors;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Cliquez sur le bouton pour fusionner deux tableaux.</p>
<button onclick="myFunction()">Cliquez</button>
<p id="demo"></p>
<script>
function myFunction() {
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.getElementById("demo").innerHTML = children;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Cliquez sur le bouton pour ajouter des éléments dans le tableau.</p>
<button onclick="myFunction()">Cliquez</button>
<p id="demo"></p>
<script>
var colors = ["Red", "Orange", "Green", "Blue"];
document.getElementById("demo").innerHTML = colors;
function myFunction() {
colors.splice(2, 0, "Black", "Yellow");
document.getElementById("demo").innerHTML = colors;
}
</script>
</body>
</html>
Dans notre exemple, le première paramètre (2) définit la position, où des nouveaux éléments doivent être ajoutés (spliced in). Le deuxième paramètre (0) définit combien d’éléments on doit retirer. D’autres paramètres ("Black" , "Yellow") définissent les nouveaux éléments qui vont être ajoutés.