How To Add New Elements To A JavaScript Array

There are several methods for adding new elements to a JavaScript array. Let’s define them.

1. How to Add Elements to the End of an Array

You can use the push() function that adds new items to the end of an array and returns the new length.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to add a new element to the array.</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>
Note: The new item(s) will be added only at the end of the array.
Recommendation: You can also add multiple elements to an array using push().

2. How to Add Elements to the Beginning of an Array

Another method is to use unshift() function, which adds an element to the beginning of an array and returns the new length.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to add elements to the beginning of the array.</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>
Note: The unshift() method does not work properly in Internet Explorer 8 and earlier.

3. How to Merge Two or More Arrays

You also can use Concat() function, which merges two or more arrays.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to join two arrays.</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>
Note: This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

4. How to Insert Elements in the Middle of an Array

And the last method is to use splice() function that adds element (elements) to the middle of an array.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>Click the button to add elements in the array.</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 our example the first parameter (2) defines the position where new elements should be added (spliced in). The second parameter (0) defines how many elements should be removed. The other parameters ("Black" , "Yellow") define the new elements to be added.

Recommendation: Depending on your needs choose the method that suits your requirements.

Do you find this helpful?

Related articles