insertAfter(srcNode, dstNode)

DOM의 API에는 insertBefore라는 메소드가 존재합니다. insertBefore는 메소드 이름처럼 Node를 삽입할 때 특정 노드의 앞(Before)에 Node를 삽입하게 해주는 역할을 합니다. Syntax는 다음과 같습니다.

var insertedElement = parentElement.insertBefore(
                                                   newElement, referenceElement)

부모 노드의 Child 노드(newElement)를 삽입할 때 지정한 노드(referenceElement)의 앞에 삽입해주게 합니다. 삽입한 형태는 다음의 트리구조를 갖게 됩니다.

삽입되는 노드가 좌측 하단의 노드라면 P2를 기준으로 C1앞에 삽입하는 형태가 될 것이고, 우측 하단의 노드의 경우에는 P3를 기준으로 C3앞에 삽입하는 형태가 될 수 있습니다.

insertBefore의 경우 DOM에서 제공됩니다만, insertAfter의 경우에는 DOM에서 제공되지 않고 있기 때문에 따로 구현해야 합니다. 구현하는 방법은 두가지가 있습니다.

var insertedElement = parentElement.insertBefore(
                                               newElement, referenceElement.nextSibling)

하나는, 동일하게 insertBefore 메소드를 호출하는 방법입니다. referenceElement의 바로 이웃한 노드인 nextSibling을 호출하여 이웃한 노드의 앞에 삽입하게하는 방법입니다. 아래의 구림을 예로 들자면 P3의 Child인 C2에서 C2의 nextSibling인 C3를 기준으로 하여 C3의 앞에 삽입하는 방법입니다.

좌측하단의 경우에는 nextSibling이 없기 때문에 null이 리턴되므로 child nodes list의 맨 마지막에 삽입되는 방법입니다. (i.e, ff모두 동작합니다.)

또 하나의 방법은 (방법이라고 할 것까지는 없겠네요.) nextSibling을 체크해서 null인 경우 부모노드에 appendChild로 child를 붙여주는 방법입니다. (명시적이기 때문에 나을 수도 있겠습니다.

insertAfter:function(srcNode, dstNode){
   if(dstNode.nextSibling){
       dstNode.parentNode.insertBefore(srcNode, dstNode.nextSibling);
   }else{
       dstNode.parentNode.appendChild(srcNode);
   }
};

출처 :
   http://developer.mozilla.org/en/docs/insertBefore