Elemento template

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento template permite a los autores crear fragmentos de documento con un formato preestablecido que puede ser reutilizado para mostrar información mediante programas. Este elemento, nuevo en HTML5, introduce al estándar el concepto de plantilla, ampliamente usado en otras áreas del software y la programación.

Por ejemplo, una plantilla puede ser definida con toda la estructura de la fila de una tabla (table), pero sin el contenido de cada celda. Un programa puede más tarde tomar esta plantilla, clonarla y rellenar las celdas con información recuperada de una base de datos. Una vez agregada al documento, la información de la base de datos será mostrada con la estructura provista por la plantilla.

Por sí mismo, un elemento template no representa nada y es completamente ignorado por los navegadores que lo soportan. Este elemento ha sido diseñado para trabajar con programas que clonan sus contenidos, agregan información y añaden el resultado a documentos activos, cuando sea necesario.

Un elemento template debe ser activado mediante programas. Antes de ser clonado e insertado en un documento activo, es completamente ignorado por los navegadores que lo soportan.

El soporte provisto por los navegadores para el elemento template es incompleto. Siendo sus contenidos representados en navegadores que no lo soportan, los autores pueden tener que recurrir a otras técnicas hasta que el soporte crezca.

Ejemplos

En el siguiente ejemplo, un elemento template es declarado con una estructura diseñada para mostrar información personal acerca de los estudiantes de una institución. Luego, un botón es provisto para activar al programa que clona esta plantilla y rellena cada span con la información que éste tiene almacenada en una variable (podría ser el caso que esta información sea cargada desde un servidor externo, por ejemplo). Luego, la información ahora estructurada, es añadida al documento y por lo tanto mostrada por el navegador.

<div>
  <template id="plantillaestudiante">
    <p>
      <b>Nombre</b>: <span></span><br>
      <b>Género</b>: <span></span><br>
      <b>Edad</b>: <span></span>
    </p>
    <hr>
  </template>
</div>
<p><input id="botoncargar" type="button" value="Cargar registro" onclick="cargarRegistro()"></p>
<script>
  var datosEstudiantes = [{nombre: 'Marie Curie',
                           genero: 'Female',
                           edad: '148'},
                          {nombre: 'Isaac Newton',
                           genero: 'Male',
                           edad: '373'},
                          {nombre: 'Albert Einstein',
                           genero: 'Male',
                           edad: '136'}];
  posActual = 0;
  function cargarRegistro() {
    var plantilla = document.getElementById('plantillaestudiante'),
        datosEstudiante = datosEstudiantes[posActual],
        clone = plantilla.content.cloneNode(true),
        fields = clone.querySelectorAll('span');
    fields[0].textContent = datosEstudiante.nombre;
    fields[1].textContent = datosEstudiante.genero;
    fields[2].textContent = datosEstudiante.edad;
    plantilla.parentNode.appendChild(clone);
    posActual++;
    if (posActual >= datosEstudiantes.length)
      document.getElementById('botoncargar').style.display = 'none';
  }
</script>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.

X

Estás buscando un lugar para alojar tu próximo sitio? Puedo ayudarte con eso!