Vamos a ver la nueva etiqueta template HTML5 que tiene como funcionalidad declarar bloques de código que no deben ser interpretados por el navegador. Aunque posteriormente pueden ser invocados mediante Java Script.
Es un sistema similar a las plantillas/templates usadas por los lenguajes Phyton, Ruby, PHP… Otras etiquetas HTML5 interesantes son:
Veamos la sintaxis de este elemento HTML5 extraída de su web oficial:
<template id=""> <!-- Código HTMLT --> </template>
Tal y como podéis ver en el código superior… tenemos la etiqueta de apertura y cierre del elemento acompañados de un atributo id para posteriormente interactuar con él.
Como todavía no está implementada en todos los navegadores deberíamos usar esta comprobación:
if ('content' in document.createElement('template')) { //código a ejecutar } else { alert("Etiqueta template NO soportada"); }
Veamos con el siguiente ejemplo de template HTML5 su funcionalidad en acción:
function ejecutaPlantilla() { if ('content' in document.createElement('template')) { var plantilla = document.getElementById('plantilla'), parrafo = document.getElementById('parrafo'), codigo = plantilla.content.cloneNode(true); parrafo.appendChild(codigo); } else { alert("Etiqueta template NO soportada"); } } $(document).ready(function() { $("#boton").click(function(){ ejecutaPlantilla(); }); });
Os explico el código superior:
El código HTML del ejemplo para el párrafo, la template y el botón es el siguiente:
<template id="plantilla"> <p>Este código proviene del template</p> </template> <p id="parrafo">Texto del párrafo, texto del párrafo, texto del párrafo.</p> <p><input type="button" id="boton" value="Usar plantilla"></p>