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:

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

Output:

Before clicking the button:
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:

// 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; 

Example:

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

Output:

Before clicking the button:
After clicking the button:

My Personal Notes

Recommended Posts: