Element HTML template
służy do przechowywania fragmentów kodu HTML, które powinny być ukryte przed użytkownikiem w trakcie ładowania strony, ale mogą być potrzebne później.
Jak jego nazwa wskazuje (ang. template – szablon), reprezentuje on szablon, którego można użyć do renderowania fragmentów treści HTML generowanych dynamicznie za pomocą JavaScriptu.
Przykład użycia elementu HTML template
<button onclick="pokazSzablon()">Pokaż raport</button>
<template>
<p>To jest bardzo ważny raport.</p>
</template>
<script>
function pokazSzablon() {
const szablon = document.getElementsByTagName('template')[0].content.cloneNode(true);
document.getElementById("kontener").appendChild(szablon);
}
</script>
<div id="kontener"></div>
Wynik
To jest bardzo ważny raport.
Kontekst użycia
Elementy nadrzędne | Elementy metadanych, elementy treści syntagmatycznej, elementy skryptowe , element colgroup bez atrybutu span |
---|---|
Brak | |
Znaczniki | Znaczniki otwierający i zamykający są obowiązkowe |
Interfejs DOM | HTMLTemplateElement |
Atrybuty obowiązkowe
Element template
nie ma atrybutów obowiązkowych.
Atrybuty opcjonalne
Element template
obsługuje atrybuty globalne i atrybuty zdarzeniowe.