• Теория
  • Теория

Клонирование и вставка элементов. 3 часть

Если при передаче false в cloneNode копируется элемент без вложенностей, то при передаче true всё наоборот. В таком случае клонируется сам элемент вместе со всеми вложенностями. Причём клонируются атрибуты, классы и текстовое содержимое всех вложенностей. Такое клонирование называется глубоким.

Раньше метод cloneNode вёл так себя по умолчанию, даже без передачи true. В новом стандарте это изменилось и без аргумента метод должен делать неглубокое копирование, как если бы был передан false. Но стандарт фиксирует рекомендации, а браузеры решают следовать им или нет. Сейчас не все браузеры перешли на новый стандарт и для обратной совместимости сохраняют старое поведение, когда по умолчанию клонирование было глубоким.

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

element.cloneNode(true);  // Вернёт склонированный элемент со всеми вложенностями
element.cloneNode();      // 0_o

Посмотрим, как работает глубокое клонирование на практике. Скопируем шаблон, добавим в его дочерний элемент текстовое содержимое и добавим шаблон на страницу.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Манипуляции с DOM» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.