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

#javascript #dhtml

Вопрос:

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

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

Я начинаю с

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

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

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

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

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

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

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

1. Я думаю, что клонирование всех дочерних узлов будет вашим лучшим выбором… глядя на исходный код jQuery wrapAll (который, я думаю, в значительной степени соответствует тому, что вы ищете), похоже, это то, что сделано (хотя я не анализировал его тщательно): james.padolsey.com/jquery/#v=1.6.2amp;fn=jQuery.fn.wrapAll Если вы можете использовать jQuery, я бы посоветовал это!

2. Правильно, wrapAll() делает трюк: jsfiddle.net/2U7rm/1

Ответ №1:

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

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

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

parent.appendChild(newDiv);

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

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

1. просто для пояснения — добавление элемента к новому родительскому элементу удаляет его связь с существующим родительским элементом. это правильно?

2. @Cheeso — Да, см. Примечания к developer.mozilla.org/En/DOM/Node.appendChild . Это работает таким образом в каждом браузере.

Ответ №2:

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

Дополнительная информация: http://api.jquery.com/wrapAll /

Ответ №3:

В качестве альтернативы использованию .firstChild можно также использовать .firstElementChild . Свойство .firstChild может возвращать текстовые узлы, которые содержат только форматирующий текст из HTML; т. Е. Первым дочерним элементом может быть просто TextNode с значением nodeValue = n .

Рассмотрите следующий фрагмент, если вы хотите перемещать только дочерние элементы, а не текстовые узлы:

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

    // Insert a new div in between a parent and its children
    while (parent.childElementCount > 0) {
        newDiv.appendChild(parentDiv.firstElementChild);
    }
    parentDiv.appendChild(newDiv)

Смотрите Это для получения подробной информации о том, как пробелы в HTML-файле могут оставаться частью активного DOM.