How to insert an item into array at specific index in JavaScript?

There is no inbuilt method in JavaScript which directly allows for insertion of an element at any arbitrary index of an array. This can be solved using 2 approaches:

Using array.splice():
The array.splice() method is usually used to add or remove items from an array. This method takes in 3 parameters, the index where the element id is to be inserted or removed, the number of items to be deleted and the new items which are to be inserted.

The only insertion can be done by specifying the number of elements to be deleted to 0. This allows to only insert the specified item at a particular index with no deletion.



Syntax:

array.splice(index, no_of_items_to_remove, item1 ... itemX)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      How to insert an item into
      array at specific index in JavaScript?
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>How to insert an item into array 
      at specific index in JavaScript?</b>
    <p>The original array is: 1, 2, 3, 4, 5</p>
    <p>Click on the button to insert -99 at index 2</p>
    <p>The new array is: <span class="outputArray"></span>
  </p>
  
    <button onclick="insertElement()">Insert element</button>
    <script type="text/javascript">
        function insertElement() {
            let arr = [1, 2, 3, 4, 5];
            let index = 2;
            let element = -99;
  
            arr.splice(index, 0, element);
            document.querySelector('.outputArray').textContent =
              arr;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    before-insert
  • After clicking the button:

Using the traditional for-loop:
The for loop can be used to move all the elements from the index (where the new element is to be inserted) to the end of the array, one place after from their current place. The required element can then be placed at the index.

Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

// shift all elements one place to the back until index
for (i = arr.length; i > index; i--) {
    arr[i] = arr[i - 1];
}
 
// insert the element at the index
arr[index] = element;

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>How to insert an item 
      into array at specific index
      in JavaScript?</title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>How to insert an item into
      array at specific index in JavaScript?
  </b>
    <p>The original array is: 1, 2, 3, 4, 5
  </p>
    <p>Click on the button to insert -99 at index 2
  </p>
    <p>The new array is: <span class="outputArray"></span>
  </p>
  
    <button onclick="insertElement()">
      Insert element
  </button>
    <script type="text/javascript">
        function insertElement() {
            let arr = [1, 2, 3, 4, 5];
            let index = 2;
            let element = -99;
  
            // shift all elements one
            // place to the back until index
            for (i = arr.length; i > index; i--) {
                arr[i] = arr[i - 1];
            }
  
            // insert the element at the index
            arr[index] = element;
  
            document.querySelector(
              '.outputArray').textContent = arr;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    before-insert2
  • After clicking the button:
    after-insert2


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.