A partir de HTML5 existe una etiqueta nueva estándar que son los templates. La etiqueta <template> es como un modelo a seguir en el cual estructuramos el contenido HTML que queramos que mediante Javascript se convierta en dinámico, por lo que es otra forma que se nos brinda de poder interactuar con el DOM.
En este capítulo veremos como trabajar con esta etiqueta junto con los fragmentos del DOM.
La etiqueta <template> es una etiqueta que no se visualiza, lo que vamos a incluir es el código HTML que necesitemos.
Veamosolo con un ejm.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Templates</title>
<style>
:root {
--yellow-color: #f7df1e;
--dark-color: #222;
}
.cards {
border: thin solid var(--dark-color);
padding: 1rem;
}
.card {
display: inline-block;
background-color: var(--dark-color);
color: var(--yellow-color)
}
.card figcaption {
padding: 1rem;
}
.rotate-45 {
transform: rotate(45deg);
}
img {
width: 20px;
height: 300px;
}
</style>
</head>
<body>
<h1>Templates</h1>
<section class="cards">
<template id="template-card">
<figure class="card">
<img>
<figcaption></figcaption>
</figure>
</template>
</section>
<script>
// Creamos las variables necesarias
const $cards = document.querySelector(".cards"),
$template = document.getElementById("template-card").content,
$fragment = document.createDocumentFragment(),
cardContent = [
{
title: "Tecnología",
img: "tech.jpg",
},
{
title: "Animales",
img: "animals.avif",
}
]
cardContent.forEach(el => {
$template.querySelector("img").setAttribute("src", el.img);
$template.querySelector("img").setAttribute("alt", el.title);
$template.querySelector("figcaption").textContent = el.title;
/* Clonamos el template, de lo contrario
solo imprimiría uno */
let $clone = document.importNode($template, true);
$fragment.appendChild($clone);
});
$cards.appendChild($fragment);
</script>
</body>
</html>