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

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

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

я начинаю с

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

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

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

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

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

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

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


javascript dhtml
person Cheeso    schedule 08.10.2011    source источник
comment
Я думаю, что клонирование всех дочерних узлов будет вашим лучшим выбором... просмотр исходного кода jQuery для wrapAll (который, я думаю, делает в значительной степени то, что вы ищете), похоже, это то, что сделано (хотя я не тщательно проанализировал его): james.padolsey.com/jquery/ #v=1.6.2&fn=jQuery.fn.wrapAll Если вы можете использовать jQuery, я бы посоветовал это!   -  person James Allardice    schedule 09.10.2011
comment
Правильно, wrapAll() помогает: jsfiddle.net/2U7rm/1   -  person Tomasz Nurkiewicz    schedule 09.10.2011

Ответы (3)


arrow_upward
4
arrow_downward

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

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

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

parent.appendChild(newDiv);

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

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

person Elian Ebbing    schedule 08.10.2011
comment
просто чтобы уточнить - добавление элемента к новому родителю удаляет его связь с существующим родителем. это правильно? - person Cheeso; 09.10.2011
comment
@Cheeso — Да, см. примечания на developer.mozilla.org/En/DOM/Node. .appendChild. Так работает в каждом браузере. - person Elian Ebbing; 09.10.2011

arrow_upward
0
arrow_downward 

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

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

person Ahmet Recep Navruz    schedule 08.10.2011

arrow_upward
0
arrow_downward

В качестве альтернативы использованию .firstChild можно также использовать .firstElementChild. Свойство .firstChild может возвращать textNodes, которые просто содержат текст форматирования из 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.

person Josh Desmond    schedule 25.03.2021