Перенос дочерних элементов в другой div: JavaScript решение

Быстрый ответ

Для быстрого переноса всех дочерних узлов из одного HTML-элемента в другой используйте цикл while и метод appendChild() в JavaScript:

let source = document.getElementById('source');
let target = document.getElementById('target');

while (source.firstChild) {
    target.appendChild(source.firstChild);
}

Данный код эффективно обходит все дочерние узлы элемента 'source' и последовательно добавляет их в элемент 'target'.

Определение родительских узлов

Перед началом работы необходимо определить элементы, узлы которых будут перенесены:

let oldParent = document.getElementById('old-parent'); // Старый родитель
let newParent = document.getElementById('new-parent'); // Новый родитель

Если элементы не имеют ID, но обладают классами или другими атрибутами:

let oldParent = document.querySelector('.old-parent'); 
let newParent = document.querySelector('.new-parent');

Текстовые узлы – тоже узлы!

Помимо элементов, в рамках перемещения участвуют и текстовые узлы:

<div id="source">Привет мир<span>!</span></div>

В данном примере цикл while также перенесёт текст "Привет мир" вместе с остальными дочерними элементами.

Порядок имеет значение!

Сохранение исходного порядка узлов при перемещении крайне важно для поддержания структуры DOM. Это принцип работы, когда аккуратно перестраиваются все элементы.

while (source.firstChild) {
    target.appendChild(source.firstChild);
}

Внимание к деталям!

Хотя использование innerHTML может показаться простым решением, оно может привести к побочным эффектам, таким как дублирование ID и потерю событий.

Адаптация под ES6 и более новые стандарты

С приходом стандарта ES6 код перемещения узлов выглядит более элегантно:

let children = [...oldParent.childNodes];
children.forEach(child => newParent.appendChild(child));

Учет поддержки старых браузеров

Не смотря на привлекательность современных методов, не забывайте о поддержке браузеров вроде Internet Explorer. Для обеспечения совместимости рекомендуется использовать заслуживший доверие метод appendChild().

Проверка в конце переноса

После переноса убедитесь, что элемент oldParent стал пустым, как чашка кофе после долгого дня программирования, а newParent наполнился дочерними узлами.

Визуализация

Рассмотрим типичный сценарий:

Старое Дерево:  [🐦, 🐦, 🐦]
Новое Дерево:  []

Исполним цикл:

while (oldTree.hasChildNodes()) {
    newTree.appendChild(oldTree.firstChild);
}

Результат выполнения:

Старое Дерево:  []
Новое Дерево:  [🐦, 🐦, 🐦]

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

Пошаговое решение

1. Клонирование узлов

Если необходимо оставить содержимое исходного элемента без изменений, можно клонировать узлы:

let clone = oldParent.cloneNode(true);

Подробнее об этом расскажет наш спикер на видео

2. Привязка событий

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

3. Очистка после переноса

Вероятно, потребуется выполнить очистку узла-источника после переноса узлов.

4. Проверка результата

Обязательно проведите проверку, чтобы не было случайного перемещения исходного узла внутрь нового.

5. Практическая демонстрация

Для наглядного примера переходите по ссылке: http://jsfiddle.net/62f9L/

Полезные материалы

1. MDN Web Docs – Node.appendChild() — подробно о методе добавления узлов.
2. Изменение документа – JavaScript.info — различные методы вставки и перемещения в DOM.
3. HTML5 Custom Data Attributes — SitePoint — об использовании data-атрибутов в HTML5.
4. Документация без jQuery – Stack Overflow — о готовности DOM без jQuery.