Как я могу вставить DIV * между * существующим родителем и ребенком?

Question

Предположим, у меня есть частичное dom-дерево с родительским узлом и набором дочерних элементов.

Как я могу вставить DIV между ними?

Я начинаю с

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

.. и хочу закончить с

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

Как я могу это сделать?

Мне нужно обратное replaceChild().Есть ли что-то вроде replaceParent()?

Полагаю, я мог бы клонировать все дочерние узлы, а затем вставить их в качестве дочерних узлов в новый узел.но ... это сохраняет все идентификаторы элементов?

---

РЕДАКТИРОВАТЬ - Я не помечал это с помощью jQuery или каких-либо фреймворков, но, возможно, мне следовало бы сказать об этом явно.Это не вопрос JQuery.Я хочу сделать это в JavaScript + DHTML.Никаких дополнительных или внешних рамок.

Answer 1

Вы можете просто перемещать элементы, добавляя их к новому родителю.В простом JavaScript:

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

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

parent.appendChild(newDiv);

Из документации W3C о appendChild:

Добавляет узел newChild в конец списка детейэтого узла.Если newChild уже находится в дереве, оно сначала удаляется.

Answer 2

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

Подробнее: http://api.jquery.com/wrapAll/