Etiqueta HTML <plantilla>
Ejemplo
Use <plantilla> para contener algún contenido que se ocultará cuando se cargue la página. Use JavaScript para mostrarlo:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214"
height="204">
</template>
<script>
function showContent() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <template>etiqueta se usa como un contenedor para ocultar contenido HTML al usuario cuando se carga la página.
El contenido interior <template>se puede representar más tarde con un JavaScript.
Puede usar la <template>etiqueta si tiene algún código HTML que quiera usar una y otra vez, pero no hasta que lo solicite. Para hacer esto sin la <template>etiqueta, debe crear el código HTML con JavaScript para evitar que el navegador reproduzca el código.
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Atributos globales
La <template>etiqueta admite los atributos globales en HTML .
Más ejemplos
Ejemplo
Rellene la página web con un nuevo elemento div para cada elemento de una matriz. El código HTML de cada elemento div está dentro del elemento de plantilla:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
temp =
document.getElementsByTagName("template")[0];
item =
temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item,
true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
Ejemplo
Verifique el soporte del navegador para <template>:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>