Wie kann man neue Elemente zu einem JavaScript-Array hinzufügen

Es gibt mehrere Methoden, um neue Elemente zu einem JavaScript-Array hinzuzufügen.

  1. Sie können die Funktion push() verwenden, welche neue Elemente an das Ende eines Arrays hinzufügt und neue Länge zurückgibt.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Klicken Sie auf den Button, um ein neues Element zum Array hinzuzufügen.</p>
    <button onclick="myFunction()">Click</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>
Hinweis: Die neuen Elemente werden erst am Ende des Arrays hinzugefügt.
Empfehlung: Sie können auch mehrere Elemente zu einem Array mithilfe von push() hinzufügen.
  1. Eine weitere Methode ist die Verwendung der Funktion unshift(), die ein Element am Anfang eines Arrays hinzufügt und neue Länge zurückgibt.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Klicken Sie auf den Button, um Elemente am Anfang des Arrays hinzuzufügen.</p>
    <button onclick="myFunction()">Click</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. Sie können auch die Funktion concat(), , die zwei oder mehr Arrays zusammenführt, verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Klicken Sie auf den Button, um zwei Arrays zu verbinden.</p>
    <button onclick="myFunction()">Click</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>
Hinweis: Diese Methode ändert die vorhandenen Arrays nicht, sondern gibt ein neues Array zurück, das die Werte der verbundenen Arrays enthält.
  1. Die letzte Methode ist die Verwendung der Funktion splice(), welche das Element (die Elemente) zur Mitte eines Arrays hinzufügt.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Klicken Sie auf den Button, um Elemente ins Array hinzuzufügen.</p>
    <button onclick="myFunction()">Click</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>

In unserem Beispiel definiert der erste Parameter (2) die Position, an der neue Elemente hinzugefügt (spliced in) werden sollen. Der zweite Parameter (0) definiert, wie viele Elemente entfernt werden sollen. Die anderen Parameter ("Black" , "Yellow") definieren die neu hinzuzufügenden Elemente.

Empfehlung: Je nach Bedarf wählen Sie die Methode, die Ihren Anforderungen entspricht.