0

Does there exist a function in vanilla JavaScript or jQuery that operates similarly to Node.insertBefore(), but for arrays and/or HTMLCollections?

An example could look something like:

var list = document.getElementsByClassName("stuff");
var nodeToMove = list[0];
var otherNode = list[4];
list.insertBefore(nodeToMove, otherNode);

Basically I'm trying to perform insertBefore() without manipulating the actual DOM, as I want the changes to only be applied to the DOM under certain conditions. If those conditions are met, then I would perform insertBefore() on the actual nodes.

To clarify, I'm looking for a function that would insert an element before a target element at a given index in an array, not necessarily at a given index. Examples I've seen using splice() usually insert an element at a given index, which sometimes puts the element before the target element, and sometimes after, depending on where the element to be moved originally was in the array. I'm looking for something that would reliably put the element to be moved before the target element.

Alex
  • 3
  • 4

3 Answers3

0

HTMLCollection does not have an insertBefore method. jQuery can apply any jQuery methods both to a single element being selected, as well as many.

https://api.jquery.com/insertBefore/

connexo
  • 53,704
  • 14
  • 91
  • 128
0

There is no single method to do this in one step, but there doesn't need to be. If you convert the collection to an Array, you can call the Array.prototype.splice() method to achieve the same result.

Here's an example:

let ary = [1,2,3,4,5];

// Swap 2 and 3

// Start at the 3rd item and remove one item (3).
// Store the removed item
let removed = ary.splice(2,1);

// Start at the second item, don't remove anything, insert the removed
// item at that position
ary.splice(1,null,removed[0]);


// Log the result
console.log(ary);

And, with that knowledge, you can create your own more easily callable function:

let ary = [1,2,3,4,5];

function insertBefore(ary, newItem, target){

  ary.splice(target,null,newItem);

}

// Insert 999 before the 3rd array item
insertBefore(ary,999,2)
console.log(ary);
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thank you for your response. The issue I run into with this is that I'm looking for a function that will insert an element *before* the element with the target index, whereas this and similar solutions I've seen using splice() insert an element *at* the given target index. Using your first example, whether the element I'm moving ends up before or after the element with the given target index varies based on where both elements were in relation to each other before the move. I'm looking for something that operates more similarly to insertBefore() in that sense. – Alex Dec 26 '19 at 22:24
0

You need to get the index you want, then use Array.splice.

Myself I would do something like this :

const myArr = ['Aurore', 'Dimitri', 'Alban', 'Frédéric'];
const insertBeforeThis = 'Alban';
const eltToInsert = 'Laura';
const index = myArr.findIndex(name => name === insertBeforeThis);

myArr.splice(index, 0, eltToInsert);

Please feel free to try it out in your browser's console. Note i used const for my array, as it fixes the type of the variable as an array but allow me to manipulate it.

MDN: Array.prototype.findIndex()

stackoverflow: How to insert an item into an array at a specific index (JavaScript)?

Have a happy coding time!