- Теория
- Теория
Клонирование и вставка элементов. 1 часть
Мы сохранили шаблон для будущих задач. Осталось «приложить» этот шаблон к нашему коду и отрисовать по нему новую задачу. Чтобы это сделать, отвлечёмся от списка дел и разберём ещё один метод DOM API.
Нельзя просто так взять один элемент и добавить его много раз на страницу. Вставка сработает только один раз.
Давайте убедимся в этом на примере.
Перед нами будет блок с карточками. Шаблон для карточки хранится в теге template.
<body>
…
<template id="element-template">
<div class="el">
<span></span>
</div>
</template>
</body>Шаблон вставлен на страницу один раз, этот код уже написан. Попробуем вставить этот же шаблон на страницу повторно.
Для вставки элементов на страницу мы будем использовать метод appendChild. Он добавляет указанные элементы в конец родительского блока. С этим методом мы уже работали здесь.
В коде вы обнаружите обращение к дочернему элементу шаблона через element.children[0].
Это нормальный подход для нашего случая. В ближайших 4 заданиях вёрстка не изменится и мы точно знаем, что нам нужен первый дочерний элемент. А так как children — коллекция, которая похожа на массив, мы можем обратиться к первому дочернему элементу по индексу.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
