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.

回答1:

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.

回答2:

$('.child').wrapAll('<div class="newdiv"></div>');

More info: http://api.jquery.com/wrapAll/

来源：https://stackoverflow.com/questions/7700140/how-can-i-insert-a-div-between-an-existing-parent-and-child