O webu
HTML značka template

Při vytváření aplikace v JavaScriptu se může hodit mít po ruce kód HTML, který se použije až později při nějaké události. Šablony pomocí <template> zatím fungují ve Firefoxu a Chrome. V IE ani Opeře 12 ne.

Šablona <template>

Cokoliv je umístěné do značky <template> podporující prohlížeče neřeší do té doby, než obsah JavaScript někde použije. Šablonu je možné umístit takřka kamkoliv do kódu (do <head>, <body>, do tabulky a podobně).

Vlastnosti šablony

  • DOM šablony se nevyhodnocuje.
  • CSS se na šablonu neaplikuje.
  • Obrázky se před použitím nenačítají.

Použití šablony může vypadat následovně:

<template>
  <p>Obsah ukrytý v šabloně</p>
</template>

„Aktivování“ obsahu šablony potom může proběhnout jeho naklonováním do stránky. Obsah z šablony je nutné dolovat přes sablona.content (protože není v DOMu stránky).

var sablona = document.querySelector('#id-sablony');
document.body.appendChild(sablona.content.cloneNode(true));

Před vložením do stránky je možné šablony libovolně JavaScriptem modifikovat. Třeba naplnit daty nějak skriptem vypočtenými a podobně.

sablona.content.querySelector("p").innerHTML = 'Ahoj';

Ukázka

Poznámka: V obsahu šablony (vlastnost content) není možné nacházet elementy metodami typu getElementsByTagName, je nutné použít querySelector.

Přednačtení (preload)

Načíst nějaký obsah z šablony dopředu nejspíš není možné.

Kvůli špatné podpoře šablony napříč prohlížeči existují alternativy

Skrytý element

Obsahu se přidá display: none. Nevýhoda tohoto řešení je, že se tento element přidá do DOMu už při načtení, ačkoliv to není zatím potřeba. Zároveň se stáhnou případné obrázky v elementu umístěné.

JS značka <script> s nesmyslným type

Zajímavější možnost je umístit obsah k pozdějšímu použití do značky <script>, které se dá nesmyslný type, takže její obsah prohlížeč jako JS kód nevyhodnotí.

<script id="sablona" type="nejaky/nesmysl">
  <p>Skrytý obsah, který obnoví JavaScript.</p>
</script>

Obsah se později může vytáhnout přes innerHTML.

document.getElementById("sablona").innerHTML

Ukázka