Копирование DIV в другой DIV с помощью jQuery

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

// Клонировано! 🐑
$('.source').clone().appendTo('.target');

Указанный фрагмент кода на jQuery копирует DIV с классом .source и помещает его внутрь DIV с классом .target. Таким образом, создается точная копия элемента.

Чтобы убедиться, что операции над элементами DOM выполняются только после их полной загрузки, обязательно оберните ваш код в $(function() { /* ваш код на jQuery */ });.

Детали функции .clone()

Краткое описание .clone()

Функция .clone() в jQuery создает полную копию выбранных элементов, включая их дочерние узлы, текст и атрибуты, такие как классы и идентификаторы. Для копирования элементов без данных и связанных с ними событий используйте .clone(false). Это аналог команд CTRL+C и CTRL+V!

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

Клонирование и использование селекторов

Для более точного выбора элементов применяйте соответствующие селекторы jQuery. Если класс .source встречается где-то еще, добавьте селектор родителя или дополнительный класс для спецификации.

Методы для размещения клонов

Метод .appendTo() вставляет клонированные элементы в конец DIV с классом target. Для большего контроля над расположением клонов используйте функции .prependTo(), .insertBefore() и .insertAfter().

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

Представим, что вы хотите переместить прибор (🔌) из одной комнаты в другую.

В гостиной есть: 🔌 
В спальне нет: 🔌

С помощью jQuery это можно сделать так просто, как будто бы у вас есть волшебная палочка 🪄.

$('#bedroom').append($('#livingRoom .gadget').clone());

Теперь приборы есть как в гостиной, так и в спальне:

Гостиная: 🔌
Спальня: Вуаля! 🔌

И никакого 3D-принтера не требуется!

Продвинутое клонирование и прочее

Исключение элементов при клонировании

Иногда нужно клонировать DIV без определенных элементов. Для этого используйте метод .not():

$('.source').clone().not('.exclude').appendTo('.target');

Таким образом будет создан клон DIV без элементов с классом .exclude.

Клонирование нескольких DIV

Если требуется скопировать несколько элементов, используйте методы .each() и .clone() вместе:

$('.source').each(function() {
  // Так вы получите идентичные клоны!
  $(this).clone().appendTo('.target');
});

Особенности копирования элементов формы

При работе с элементами формы для избегания дублирования идентификаторов и значений очищайте поля с помощью .val(''):

$('.source').clone().find(':input').val('').end().appendTo('.target');

Это позволяет создавать множество форм без путаницы в данных.

Будьте осторожны, ведь есть подводные камни!

Обработчики событий

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

$('.source').clone(true).appendTo('.target').on('click.myNamespace', function() {
  // Ваш интерактив уходит не впустую!
});

Производительность

Клонирование больших структур может уменьшить производительность. Стремитесь к оптимизации селекторов и минимизации использования .clone().

Уникальность идентификаторов

После клонирования уникальность идентификаторов играет важную роль для стабильности работы страницы. Убедитесь, что клонированным элементам присваиваются уникальные идентификаторы.

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

1. .clone() | Документация API jQuery — для глубокого понимания процесса клонирования с помощью jQuery.
2. .append() | Документация API jQuery — для изучения вставки элементов DOM.
3. :last-child | CSS-Tricks — об использовании CSS селектора :last-child.
4. Node: метод cloneNode() – Web APIs | MDN — об alternative способах клонирования узлов без использования jQuery.
5. jQuery Add Elements — руководство по добавлению и клонированию элементов с помощью jQuery.