Oznaka <template>

Oznaka <template> se uporablja kot vsebnik za shranjevanje HTML vsebine, tiste, ki je skrita pred uporabniki, ko se stran naloži. Vsebina znotraj <template> je pozneje mogoče upodobiti z JavaScript-om. Oznako <template> lahko uporabimo, če imamo nekaj HTML kode, ki jo želimo uporabiti znova in znova, vendar ne, dokler je ne zahtevamo ali potrebujemo. Če želimo to narediti brez <template> oznake, moramo ustvariti HTML kode z JavaScript-om, da brskalniku preprečimo uporabljanje kode.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primer: <template></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button onclick="pokaziVsebino()" id="btn">Pokaži vsebino</button>

<template>
    <h3>HTML</h3>
    <p>Dobrodošli v HTML vadnico.</p>
    <img src="/demo/smiley-heart.png" alt="Smeško">
</template>

<script>
    function pokaziVsebino() {
        const x = document.getElementsByTagName("template")[0];
        const y = x.content.cloneNode(true);
        document.body.appendChild(y);
    }
</script>
</body>
</html>

REZULTAT