Вёрстка сайтов | HTML, CSS, JS on Telegram: “Что такое <template> и как с ним работать? Тег <…”

Что такое <template> и как с ним работать?

Тег <template> — это один из самых недооценённых инструментов HTML. Он позволяет создавать невидимые для пользователя шаблоны, которые можно динамически использовать через JavaScript.

Как это работает?
Контент внутри <template> не отображается на странице до тех пор, пока вы не скопируете его с помощью JavaScript и не вставите в DOM.

<template id="my-template">  
  <div class="card">  
    <h3>Это шаблон!</h3>  
    <p>Этот текст появится, только если вы его активируете через JS.</p>  
  </div>  
</template>

const template = document.getElementById("my-template");  
const content = template.content.cloneNode(true);  
document.body.appendChild(content);

Используйте <template> для повторяющихся элементов, таких как карточки, списки или модальные окна.

#полезнаястатья