template | Html

Descripción

El elemento template en HTML es un mecanismo para mantener el contenido HTML del lado del cliente que no se representa cuando se carga la página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución utilizando JavaScript.

Sintaxis

<template>
  <!-- contenido aquí -->
</template>

Atributos Globales

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Templates HTML5</title>
</head>
<body>

<h1>Templates HTML5</h1>

<table id="ciudades">
  <thead>
    <tr>
      <td>Ciudad</td>
      <td>País</td>    
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<template id="ciudad">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

<script>


// Comprobamos si el navegador soporta el elemento template comprobando
// si tiene el atributo content

if ('content' in document.createElement('template')) {
    
  const tbody = document.querySelector("tbody");
  const template = document.querySelector("#ciudad");

  // Clona la plantilla
  const clone = template.content.cloneNode(true);
  let td = clone.querySelectorAll("td");
  td[0].textContent = "Barcelona";
  td[1].textContent = "Spain";

  tbody.appendChild(clone);

  // Clona nuevamente la plantillax11
  const clone2 = template.content.cloneNode(true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "Paris";
  td[1].textContent = "Francia";

  tbody.appendChild(clone2);
}
</script>

</body>
</html>

Artículos

Crear una plantilla en HTML5

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.