cloneNode: клонирование

cloneNode(deep) создаёт точную копию DOM-узла: без аргумента (или false) — только сам элемент, с true — вместе со всем поддеревом.

Зачем нужно

Клонирование позволяет эффективно копировать сложные DOM-структуры без повторного создания элементов вручную. Это незаменимо при работе с шаблонами (<template>), дублировании карточек, строк таблицы и других повторяющихся компонентов.

Где используется

  • Дублирование карточек товаров, строк формы, элементов списка
  • Работа с элементом <template> для рендеринга компонентов
  • Создание копии узла перед его изменением (иммутабельный подход)

Синтаксис

const clone = element.cloneNode(deep);
// deep: true  — клонировать вместе с дочерними элементами
//       false — только сам элемент без детей

Примеры

Базовое клонирование

const card = document.querySelector('.card');

// Поверхностная копия — только сам .card без содержимого
const shallowCopy = card.cloneNode(false);

// Глубокая копия — .card + всё поддерево
const deepCopy = card.cloneNode(true);

document.querySelector('.container').append(deepCopy);

Дублирование строки формы

const row = document.querySelector('.form-row');
const addBtn = document.getElementById('add-row');

addBtn.addEventListener('click', () => {
  const newRow = row.cloneNode(true);

  // Очистить значения полей в клоне
  newRow.querySelectorAll('input').forEach(input => {
    input.value = '';
  });

  row.parentElement.append(newRow);
});

Использование с <template>

const tpl = document.getElementById('card-template'); // <template>
const data = { title: 'Заголовок', text: 'Описание' };

// content — DocumentFragment внутри <template>
const clone = tpl.content.cloneNode(true);
clone.querySelector('.card__title').textContent = data.title;
clone.querySelector('.card__text').textContent = data.text();

document.querySelector('.list').append(clone);

Клонирование узла перед изменением

const original = document.querySelector('.widget');
const backup = original.cloneNode(true);

// Изменяем оригинал
original.classList.add('modified');

// Восстановить при необходимости
// original.replaceWith(backup);

Частые ошибки

  • Клонирование без true — cloneNode без аргумента копирует только сам узел; дочерние элементы теряются.
  • Дублирование id — клон наследует все атрибуты включая id; id должен быть уникальным на странице, поэтому после клонирования его нужно изменить или удалить.
  • Обработчики событий не копируются — cloneNode не клонирует слушателей, добавленных через addEventListener; их нужно повесить на клон отдельно.

Связанные темы

Ресурсы