1. Snippets
  2. ›
  3. JavaScript
  4. ›
  5. Comment Ajouter des Nouveaux Éléments Au Tableau JavaScript

Comment Ajouter des Nouveaux Éléments Au Tableau JavaScript

Il existe plusieurs méthodes pour ajouter nouveaux éléments au tableau JavaScript. Nous allons les définir.

  1. Vous pouvez utiliser la fonction  push() qui ajoute nouveaux objets à la fin d’un tableau, et renvoie la nouvelle largeur.

Exemple

<!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>
Le nouvel objet sera ajouté seulement à la fin d’un tableau.
Recommendation: Vous pouvez également ajouter plusieurs éléments au tableau en utilisant  push() .
  1. Une autre méthode vous propose à ajouter une fonction unshift() qui ajoute un élément au début d’un array et renvoie la nouvelle langueur.

Exemple

<!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>
  1. Vous pouvez également utiliser la fonction concat(), qui fusionne un ou plusieurs tableaux.

Exemple

<!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>
Cette méthode ne change pas les tableaux existents, mais renvoie un nouvel tableau, qui contient les valeurs des tableaux fusionnés.
  1. La dernierre méthode est l’utilisation de la fonction splice() qui ajoute un élément (éléments) au milieu d’un tableau.

Exemple

<!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.

Recommendation: Choisissez la méthode qui correspond à vos besoins.
Trouvez-vous cela utile?

Articles Associées