Complete Guide: JavaScript Array Insert at Specific Index

The most common way to insert an item into an array at a specific index in JavaScript is using the built-in splice() method. While jQuery doesn’t have a native array insertion method, you can create your own insert() function or use various JavaScript approaches to achieve this functionality.

Contents

• Native JavaScript Methods
• Custom Insert Functions
• jQuery Approaches
• Performance Considerations
• Practical Examples

Native JavaScript Methods

Using the splice() Method

The splice() method is the most straightforward approach for modifying arrays in-place. It allows you to insert elements at any index while optionally removing existing elements.

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb"); // Inserts at index 1
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

The syntax is: array.splice(startIndex, deleteCount, item1, item2, ...)

• startIndex: The index where insertion begins
• deleteCount: Set to 0 to insert without removing elements
• Additional parameters: The items to insert

As Mozilla Developer Network explains, “The splice() method of Array instances changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.”

Immutable Approach with slice() and concat()

For functional programming or when you need to preserve the original array, you can combine slice() and concat():

function insertImmutable(array, index, item) {
    return array.slice(0, index).concat(item, array.slice(index));
}

const original = [1, 2, 3, 4];
const modified = insertImmutable(original, 2, 'new');
console.log(modified); // [1, 2, "new", 3, 4]
console.log(original); // [1, 2, 3, 4] - unchanged

Using Array Spread Operator

Modern JavaScript provides an elegant solution with the spread operator:

function insertWithSpread(array, index, item) {
    return [...array.slice(0, index), item, ...array.slice(index)];
}

const data = ['a', 'b', 'd'];
const newData = insertWithSpread(data, 2, 'c');
console.log(newData); // ['a', 'b', 'c', 'd']

Custom Insert Functions

Prototype Extension

You can add an insert method to the Array prototype to achieve the exact syntax you want:

Array.prototype.insert = function(index, item) {
    this.splice(index, 0, item);
    return this;
};

// Usage
const myArray = [1, 2, 4];
myArray.insert(2, 3);
console.log(myArray); // [1, 2, 3, 4]

Note: Extending built-in prototypes can cause conflicts in some environments, so use with caution.

Function-Based Insert Method

For a safer approach without modifying prototypes:

function insertAt(array, index, ...items) {
    return array.slice(0, index).concat(items, array.slice(index));
}

// Usage
const fruits = ['apple', 'banana', 'orange'];
const newFruits = insertAt(fruits, 1, 'mango', 'grape');
console.log(newFruits); // ["apple", "mango", "grape", "banana", "orange"]

jQuery Approaches

While jQuery doesn’t provide direct array manipulation methods, you can use jQuery’s utilities or create your own array insertion function:

// Using jQuery's $.extend to create an array plugin
$.extend({
    insertIntoArray: function(array, index, item) {
        array.splice(index, 0, item);
        return array;
    }
});

// Usage
const data = [1, 2, 3, 4];
$.insertIntoArray(data, 2, 'new');
console.log(data); // [1, 2, "new", 3, 4]

For DOM-related arrays, jQuery provides methods like .insertAfter(), but these are for DOM manipulation, not array manipulation:

// This is for DOM elements, not arrays
$('<p>New element</p>').insertAfter('#existing-element');

Performance Considerations

The splice() method is generally the most efficient for in-place modifications, while immutable methods are better for functional programming patterns. According to Sentry.io, “The first argument of the splice() method is the start index, which is the index at which to start changing the array. This is the only required argument.”

Practical Examples

Inserting Multiple Items

const numbers = [1, 2, 5, 6];
numbers.splice(2, 0, 3, 4); // Insert multiple items
console.log(numbers); // [1, 2, 3, 4, 5, 6]

Conditional Insertion

function insertIfNotExists(array, index, item) {
    if (!array.includes(item)) {
        array.splice(index, 0, item);
    }
    return array;
}

const uniqueItems = [1, 2, 3];
insertIfNotExists(uniqueItems, 1, 2); // Won't insert duplicate
insertIfNotExists(uniqueItems, 1, 'new'); // Will insert
console.log(uniqueItems); // [1, "new", 2, 3]

Inserting at End or Beginning

const arr = [2, 3, 4];

// Insert at beginning (index 0)
arr.splice(0, 0, 1);

// Insert at end (index = array.length)
arr.splice(arr.length, 0, 5);
console.log(arr); // [1, 2, 3, 4, 5]

Sources

1. MDN Web Docs - Array.prototype.splice()
2. Stack Overflow - How to insert an item into an array at a specific index
3. Sentry.io - How to insert an item into an array at a specific index using JavaScript
4. FreeCodeCamp - How to Insert into a JavaScript Array at a Specific Index
5. DigitalOcean - How to insert an item into an array at a specific index with JavaScript
6. W3Schools - JavaScript splice() Method
7. jQuery API Documentation - .insertAfter()

Conclusion

• The splice() method is the most efficient native JavaScript solution for inserting items into arrays at specific indices
• For immutable operations, use slice() + concat() or the spread operator
• You can create custom insert() functions to achieve the exact syntax you want
• jQuery doesn’t provide built-in array insertion methods, but you can easily implement your own
• Consider performance implications when choosing between in-place and immutable approaches
• The splice() method remains the de facto standard for array manipulation in JavaScript

For most use cases, array.splice(index, 0, item) provides the simplest and most performant solution, while immutable methods are preferred in functional programming contexts and when you need to preserve the original array.