2

I have the following code:

<div id="container">
<div id="cat1"></div>
<div id="cat2"></div>
<div id="cat3"></div>
</div>

I can do a insertBefore but there is no insertAfter... what if I want to append another cat to the container? Do I really have to use a nextSibling? It fells very strange that there is an insertBefore and for an insertAfter one has to use a hack. Are there alternatives to 

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
insertAfter(document.getElementById("tres"), myscript);
Astronaut
  • 6,691
  • 18
  • 61
  • 99
  • No, what you have is really fine. – Bergi May 29 '13 at 17:39
  • You could do `parent.insertBefore(new, old); parent.insertBefore(old, new);` This would simulate an `insertAfter` by doing a swap. – Dogbert May 29 '13 at 17:43
  • @Bergi I found that as well, but technically OP is asking if there's something *better* than the answer to that question. – ajp15243 May 29 '13 at 17:43
  • @ajp15243: Obviously not, otherwise it would have become the top answer there :-) Basically it's the same question, asking for the "best way". – Bergi May 29 '13 at 17:48
  • I have an alternative way, it's not great, and adds garbadge, add a div with id containerEnd and do insertBefore(elem, containerEnd). It's an alternative, but not a better one. – Astronaut May 29 '13 at 17:57

2 Answers2

4

Since you can combine insertBefore and nextSibling, there is no need for another function. insertBefore has the added bonus of behaving like appendChild if the second argument is null.

You can extend the prototype chain to implement insertAfter like so:

Node.prototype.insertAfter = function(n,r) {this.insertBefore(n,r.nextSibling);};

This will allow you to call:

someContainer.insertAfter(newNode, someReference);

Note that older versions of IE don't like you messing with the prototype of built-in objects.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • You might want to use `r ? r.nextSibling : this.firstChild` :-) – Bergi May 29 '13 at 17:46
  • Indeed I will have to for something like this since I am adding hundreds of slides one after another. I even thought about adding a DOM element and doing
    and then use the insertBefore(newdiv,containerEnd); it feels a bit more natural to use, but adds garbage, it's very strange. That is one want's to insertAfter, one has to use insertBefore.     – Astronaut May 29 '13 at 17:52
  • Wait... you're trying to add it as the last element? What's wrong with `appendChild`? – Niet the Dark Absol May 29 '13 at 18:58
  • I am actually adding with no exact order, but at load I am lading them all one after the other. – Astronaut May 29 '13 at 22:51
-1

you can use this following function instead of your method you will get solution.

    function insertAfter(referenceNode, newNode) {   
newNode.insertBefore(referenceNode.next());

}

Mathi
  • 742
  • 1
  • 10
  • 15