Определение HTML - шаблона

Введение

Тег <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 вы можете динамически отображать контент, когда он нужен. Это может помочь сократить избыточность в вашем коде и сделать его легче поддерживать.