Comments on: Javascript DOM insertAfter function

James

Fri, 21 Aug 2009 20:11:04 GMT

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);

RobS

Thu, 26 Mar 2009 03:14:54 GMT

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.

nutria

Fri, 29 Aug 2008 20:02:12 GMT

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);
}

JS

Thu, 10 Jul 2008 08:36:33 GMT

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);
    }
}

ANON

Thu, 03 Jul 2008 07:32:55 GMT

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

ANON

Thu, 03 Jul 2008 06:48:39 GMT

I just tried it in IE7 and FF2 - worked like a charm!

lobo235

Fri, 27 Jun 2008 16:15:05 GMT

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.

odavis4

Fri, 23 May 2008 02:20:56 GMT

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.