Перенос дочерних элементов в другой 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/
Полезные материалы
- MDN Web Docs – Node.appendChild() — подробно о методе добавления узлов.
- Изменение документа – JavaScript.info — различные методы вставки и перемещения в DOM.
- HTML5 Custom Data Attributes — SitePoint — об использовании data-атрибутов в HTML5.
- Документация без jQuery – Stack Overflow — о готовности DOM без jQuery.