Введение
Тег <template> в HTML позволяет создавать повторно используемый контент, который не отображается на странице при ее загрузке. Это полезно, когда у вас есть контент, который не нужен в начале загрузки страницы, но может быть доступен позже с использованием JavaScript. В этом практикуме вы пройдете по шагам создания HTML-шаблона.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Добавьте тег
Во - первых, создайте HTML - файл с именем index.html.
Добавьте тег <template> в ваш HTML - файл. Этот тег требует открывающего и закрывающего тегов и должен содержать контент, который вы хотите повторно использовать позже.
<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
Примечание: Атрибут id поможет вам ссылаться на шаблон позже в JavaScript.
Создайте область для вставки
Создайте пустую область, в которую вы будете вставлять содержимое шаблона. Для этого используйте тег <div> и дайте ему атрибут id.
<div id="placeholder"></div>
Используйте JavaScript для отображения шаблона
Добавьте блок кода на JavaScript в ваш HTML - файл, чтобы отобразить содержимое шаблона в области для вставки.
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
Этот код сначала получит шаблон из HTML с использованием метода getElementById, а затем создаст клон его содержимого. Затем содержимое добавляется в область для вставки.
Сохраните файл index.html и откройте его в веб - браузере. Вы должны увидеть, что содержимое из шаблона появляется в области для вставки.
Резюме
Использование HTML - тега <template> - это простой и полезный способ создания повторно используемого контента на ваших веб - страницах. С помощью JavaScript вы можете динамически отображать контент, когда он нужен. Это может помочь сократить избыточность в вашем коде и сделать его легче поддерживать.
index.html.<template> в ваш HTML - файл. Этот тег требует открывающего и закрывающего тегов и должен содержать контент, который вы хотите повторно использовать позже.<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
id поможет вам ссылаться на шаблон позже в JavaScript.<div> и дайте ему атрибут id.<div id="placeholder"></div>
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
getElementById, а затем создаст клон его содержимого. Затем содержимое добавляется в область для вставки.index.html и откройте его в веб - браузере. Вы должны увидеть, что содержимое из шаблона появляется в области для вставки.<template> - это простой и полезный способ создания повторно используемого контента на ваших веб - страницах. С помощью JavaScript вы можете динамически отображать контент, когда он нужен. Это может помочь сократить избыточность в вашем коде и сделать его легче поддерживать.
