Search code examples
javascriptdhtml

How can I insert a DIV *between* an existing parent and child?

Suppose I have a partial dom tree with a parent node and a set of children.

How can I interject a DIV between them?

I am starting with

parent --+--> child[0]
         |--> child[1]
         |--> child[2]

..and I want to end with

parent ---> newdiv ---+--> child[0]
                      |--> child[1]
                      |--> child[2]

How can I do this?

I need the converse of replaceChild() . Is there something like replaceParent() ?

I suppose I could clone all the child nodes, and then insert them as children in the new node. but... does that retain all the element ids?

EDIT - I didn't tag this with jQuery, or any framework, but maybe I should have been explicit about it. This is not a jQuery question. I want to do this in javascript + DHTML. No extra or outside framework.

Solution

  • You can just move elements around by appending them to a new parent. In plain javascript:

    var newDiv = document.createElement("div");

while(parent.hasChildNodes())
    newDiv.appendChild(parent.firstChild);

parent.appendChild(newDiv);

    From the documentation of W3C about appendChild:

    Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.