using javascript's .insertBefore to insert item as last child

Question

I so miss jQuery. I'm working on a project where I need to get my hands dirty with good 'ol plain Javascript again.

I have this scenario:

parent
    child1
    child2
    child3

Via javascript, I want to be able to insert a new node before or after any of those children. While javascript has an insertBefore, there is no insertAfter.

Insert before would work fine on the above to insert a node before any one of those:

parent.insertBefore(newNode, child3)

But how does one insert a node AFTER child3? I'm using this at the moment:

for (i=0,i<myNodes.length,i++){
    myParent.insertBefore(newNode, myNodes[i+1])
}

That is inserting my newNode before the next sibling node of each of my nodes (meaning it's putting it after each node).

When it gets to the last node, myNodes[i+1] become undefined as I'm now trying to access a array index that doesn't exist.

I'd think that'd error out, but it seems to work fine in that in that situation, my node is indeed inserted after the last node.

But is that proper? I'm testing it now in a few modern browsers with no seemingly ill effects. Is there a better way?

Can we get the accepted answer adjusted here? @Gibolt has the most appropriate answer for current standards and would help any future readers greatly. — Xandor, Feb 02 '20 at 23:54

score 30 · Answer 1 · answered Oct 05 '14 at 09:38

30

Pure JavaScript actually has a method for what you want:

parent.appendChild(child_to_be_last)

answered Oct 05 '14 at 09:38

Robert Siemer

32,405
11
84
94

This really seems like the most proper way to do it – Gary Jul 08 '15 at 00:43

Elian Ebbing · Accepted Answer · 2011-03-04T14:09:16.650

24

The functionality of insertBefore(newNode, referenceNode) is described as:

Inserts the specified node before a reference node as a child of the current node. If referenceNode is null, then newNode is inserted at the end of the list of child nodes.

And since myNodes[i+1] is outside of the array bounds, it returns undefined, which is treated as null in this case. This means you get your desired behavior.

Edit: Link to the W3 specification of insertBefore()

edited Mar 04 '11 at 14:09

answered Mar 04 '11 at 10:55

Elian Ebbing

18,779
5
48
56

Good to know! I guess it's perfectly valid. – DA. Mar 04 '11 at 14:44
While this does work, for any future readers: Check out the answer provided by @Gibolt as it is the most up to date and intuitive way of doing this if you do not need to support legacy browsers such as IE. – Xandor Feb 02 '20 at 23:57

Gibolt · Answer 3 · 2021-03-04T21:51:48.250

10

Modern Solution

If you want to position based on child, simply use before or after

child1.before(newNode)   // [newNode, child1, child2]
// or
child1.after(newNode)    // [child1, newNode, child2]

If you want to position based on parent, use prepend or append

parent.prepend(newNode)  // [newNode, child1, child2]
// or
parent.append(newNode)   // [child1, child2, newNode]

Advanced usage

You can pass multiple values (or use spread operator ...).
Any string value will be added as a text element.

Examples:

child1.after(newNode, "foo")     // [child1, newNode, "foo", child2]

const list = ["bar", newNode]
parent.prepend(...list, "fizz")  // ["bar", newNode, "fizz", child1, child2]

Mozilla Docs

before - after

prepend - append

Can I Use - 95% Mar 2021

edited Mar 04 '21 at 21:51

answered Aug 13 '17 at 02:55

Gibolt

42,564
15
187
127

1

Thank you so much for this! I do not feel like this is very well known in the current standard and this should now be the accepted answer. It is accepted by all major, non-legacy (meaning excluding IE, but who cares), browsers. – Xandor Feb 02 '20 at 23:52
1

same here @Xandor very much appreciate you sharing this, I have not come across these methods before! – RandomDeveloper Jun 10 '22 at 16:03

score 6 · Answer 4 · answered Dec 27 '12 at 22:04

6

To insert item as a last node use :parentNode.insertBefore(newNode, null);

answered Dec 27 '12 at 22:04

devildrey33

69
1
3

score 0 · Answer 5 · answered Sep 14 '12 at 21:40

0

Also when not iterating through children (just inserting after referenceNode) this might be useful:

parentNode.insertBefore(newNode, referenceNode.nextSibling);

answered Sep 14 '12 at 21:40

Zajo

362
2
14

score 0 · Answer 6 · answered Apr 09 '15 at 02:58

I got this code is work to insert a link item as the last child

var cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

var raf=requestAnimationFrame||mozRequestAnimationFrame||
    webkitRequestAnimationFrame||msRequestAnimationFrame;
if (raf)raf(cb);else window.addEventListener('load',cb);

using javascript's .insertBefore to insert item as last child

6 Answers6

Modern Solution

Advanced usage

Mozilla Docs

Linked