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

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

Мы вставили шаблон, после него другой элемент и снова попробовали вставить шаблон. В итоге шаблон оказался только один и в конце списка. Почему так произошло?

Потому что элемент только один, даже если это шаблон. Мы не можем вставить один элемент несколько раз в разные места страницы. Мы же не можем быть в нескольких местах одновременно? Вот и элементы DOM не могут.

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

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

Обратите внимание, у этого метода есть аргумент — булево значение. Если передать значение false, то будет скопирован сам элемент со своими классами и атрибутами, но без дочерних элементов.

element.cloneNode(false); // Вернёт склонированный элемент без вложенностей

Попробуем клонировать элемент, передать в cloneNode аргумент false и вставить такой элемент на страницу.

В следующем задании мы узнаем, что происходит, если передать в cloneNode аргумент true или вообще не передавать аргументы. Спойлер: всё странно.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 5 дней цена 18 900 ₽22 900 ₽

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

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

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

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

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

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