Etiqueta template HTML5: Declarar bloques de código

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:

Sintaxis de la etiqueta template HTML5

Veamos la sintaxis de este elemento HTML5 extraída de su web oficial:

<template id="">
<!-- Código HTMLT -->
</template>

</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.

Detectar la compatibilidad de template HTML5 con el navegador

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");
            }

if ('content' in document.createElement('template'))

{

//código a ejecutar

} else

{

alert("Etiqueta template NO soportada");

}

Ejemplo de la etiqueta template HTML5

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();
		});
	});

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:

Detectamos el click en el botón con id = «boton». Llamamos a la función ‘ejecutaPlantilla’.
Se realiza un código de comprobación para ver si el navegador es compatible con la etiqueta template.
En caso negativo se saca un mensaje por pantalla, si el navegador es compatible se ejecuta el código.
Dicho código guarda en la variable plantilla el contenido del template con id = «plantilla».
En la variable parrafo se almacena el contenido del párrafo.
Se clona el contenido y se muestra en el párrafo con id = «parrafo».

Código HTML del ejemplo

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>