<template>

<template> - шаблон HTML.

Синтаксис:

<template></template>

Опис:

<template> (анг. template - шаблон) HTML тег який використовується як контейнер для зберігання певного вмісту HTML, прихованого від користувача під час завантаження сторінки. Шаблон в подальшому використовує JavaScript.

Шаблони HTML часто використовуються у Web-компонентах.

Тег <template> має загальні атрибути.

Приклад:

<template id="test"><div class="post"><a class="post_href"><div class="post_name"></div> <div class="post_data"></div></a></div></> <style> .post{padding:5px;} .post_name{font-size:12px;} .post_data{font-size:8px; color:#3d3e3d;} .post_href{cursor:pointer;} </style></template> <div id="result"></div> var mas=[ {name:'Анімаційна "мандала" на полотні canvas', data:'2021-10-21 20:15:36', href:'/публікація/48'}, {name:'Перетворення зображення у HTML', data:'2020-04-11 11:08:20', href:'/публікація/39'}, {name:'Ефект танцюючий текст', data:'2017-10-15 17:54:50', href:'/публікація/9'} ]; var template=document.getElementById('test'); var div=document.getElementById('result'); for(let i=0;i<mas.length;i++){ let p=template.content.cloneNode(true); p.querySelector('.post_href').href=mas[i].href; p.querySelector('.post_name').innerText=mas[i].name; p.querySelector('.post_data').innerText=mas[i].data; div.appendChild(p); }