The Netlobo logo - a Nevada desert landscape

Comments for Javascript DOM insertAfter function

< Back to the article

10 comments for this article.

RSS Feed Icon Subscribe to the comments for this article

Posted: 2008-06-27 10:11:49 by odavis4
This won't work of course if the element you're trying to insert after is the last element in the reference element's parent. Besides, this is hilariously trite, poor javascript (just Google 'javascript insertAfter' to get a grasp of the uninformed horror). Try checking whether the reference element is equal to the parent's last child and appending the new element if so, doing what everybody else seems to strain themselves doing only otherwise.
Posted: 2008-06-27 10:15:05 by lobo235 - Netlobo Staff Member
odavis4,

You may think that it doesn't work but did you actually try it? I have tried it in Opera, Safari, Firefox and IE and it works in all of the browsers without checking if the element is the parent's last child, etc.

It would be wise to try something yourself before labeling it as 'hilariously trite, poor javascript' when it is in fact simple and efficient javascript.
Posted: 2008-07-03 07:44:06 by ANON
I just tried it in IE7 and FF2 - worked like a charm!
Posted: 2008-07-03 07:44:38 by ANON
I just tried this to add tags to the very bottom of documents in both IE7 and FF2 - worked like a charm!!
Thanks very much
Posted: 2008-07-10 07:19:59 by JS
Worst Case Scenario: If you're afraid that insertBefore won't work, just make the additional mods:
// This function inserts newNode after referenceNode
function insertAfter( referenceNode, newNode )
{
    if (referenceNode.nextSibling) {
        referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
    }
    else {
        referenceNode.parentNode.appendChild( newNode);
    }
}
Posted: 2008-08-29 14:12:55 by nutria
Theres no wcs here. I was trying the code a while ago and managed to fire an error on IE. The problem happens when the referenceNode.nextSibbling is undefined.

In the original example there was a text node (the line change in the code) that was acting as a nextSibbling for the supoussed to be last element. When deleting the line change IE7 stopped working because the node.insertBefore functions does not expect a undefined value as second parameter.

So for IE to work is necesary to map the undefined value to null.

Now without further ado... the function... this is working well for me.

var undefined;
function insertAfter (node, newNode){
var parent = node.parentNode;
var next = node.nextSibbling;
//following: the IE fix
if (next==undefined) next=null;
parent.insertBefore(newNode,next);
}
Posted: 2009-03-26 12:59:28 by RobS
Nutria, it is working for me in IE. I noticed you spelled Sibling with 2 B's. Maybe that is why it was coming up as "undefined".

Anyway, this solution was great, saved my coding project from turning into something ugly. Very elegant and simple--awesomeness.
Posted: 2009-08-21 14:29:52 by James
Works, unless the element is the last child, i.e. <td><hr /></td>. You should add a condition that checks if it is the last child, and if it is, simply use appendChild();

function insertAfter(newElem,elem)
{
if(elem.nextSibling) elem.parentNode.appendChild(newElem);
else elem.parentNode.insertBefore(newElem,elem.nextsibling);
Posted: 2011-01-28 16:10:34 by Gabe
Howdy! Thanks for posting this. I have been working on this for a few hours and am not a Javascript expert by any means. This is working great for my purposes and I am grateful!
Posted: 2012-08-16 09:36:18 by Kurt
Why can\'t you just pass null as the second parameter of insertBefore?

RSS Feed Icon Subscribe to the comments for this article

Post your comment for the Javascript DOM insertAfter function article:

Name (required) (letters and numbers only):
Email (required) (will not be published):
Website (include http://):
Comment (required): (HTML tags allowed: pre, strong, em, b, i)