- Теория
- Теория
Шаблоны и тег <template>
У нас есть данные, чтобы создать новую задачу. Мы знаем, в какой момент можно добавить задачу на страницу. Осталось разобраться, как именно будет реализовано добавление нового элемента.
Мы уже создавали новые элементы через createElement, но этот способ долгий. Сначала надо создать элемент, задать ему класс, атрибуты, потом так же создать дочерние элементы, вложить их в родителя и потом отрисовать на страницу.
Было бы удобно, если бы вся необходимая разметка для будущих элементов уже где-то хранилась. Нам бы оставалось только подправить содержимое под каждый элемент. И это можно сделать с помощью тега template.
Он хранит в себе шаблон для будущих элементов. Тег template находится там же, где и вся разметка сайта, только его содержимое не отображается на странице. В нашей разметке тоже есть template. Он хранит шаблонную разметку новой задачи.
Чтобы получить template в JavaScript, его можно найти по названию тега, например, через querySelector('template'). У этого способа есть минус — шаблонов на странице может быть много. Обычно каждому тегу template дают уникальное название и записывают в атрибут id (идентификатор). Значения этого атрибута не могут повторяться на одной странице. По id можно найти необходимый шаблон.
Шаблон в разметке:
<body>
…
<template id="text-template">
<p class="text"></p>
</template>
</body>Поиск элемента в JavaScript:
document.querySelector('#text-template');
Решётка в параметре querySelector обозначает, что искать надо по id.
У нашего шаблона идентификатор task-template. Найдём этот template и выведем содержимое тега на страницу.
Есть ещё один метод в DOM API, который позволяет искать элементы по идентификатору — getElementById. В отличие от других методов он может быть вызван только на всём документе, а не отдельном элементе. Мы познакомимся с этим методом ближе в других тренажёрах, пока потренируемся искать элементы по id с помощью querySelector. Если вам хочется узнать подробности о новом методе поскорей, можете почитать про него на MDN.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
