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?
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, thennewNode
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()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With