Usar template para representar contenido con JavaScript
Combine plantillas con bucles de JavaScript para crear listas dinámicas
Usar template para representar contenido con JavaScript es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento template
El elemento <template> contiene HTML que no se renderiza hasta que JavaScript lo clona y lo inserta. Su contenido es inerte: los scripts no se ejecutan, las imágenes no se cargan y los estilos no se aplican hasta que se activa el template.
Acceso al contenido del template
El contenido del template reside en un DocumentFragment accesible mediante template.content. Para usarlo, clone el fragmento: const clone = template.content.cloneNode(true). El argumento true realiza una clonación profunda que incluye todos los nodos descendientes.
Renderizado de instancias de template
Personalice el clon antes de insertarlo: busque elementos dentro del clon, establezca el contenido de texto y añada detectores de eventos. Después, añádalo al DOM: container.appendChild(clone). Cada cloneNode() crea una copia independiente; puede modificar una sin afectar a las demás.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Renderizado de listas a partir de templates
Combine templates con Array.forEach o Array.map para renderizar listas: para cada elemento de data, clone el template, complete los valores y añádalo a un contenedor de lista. Este patrón se parece al de los frameworks, pero se basa en HTML y JavaScript estándar.
Template para filas de tablas
Defina un <template> que contenga un <tr> con celdas. Clone y complete una instancia para cada fila de datos. Así se evita concatenar cadenas para generar HTML; no es necesario escapar nada porque se establece textContent en lugar de innerHTML.
La activación del template es explícita
Los templates nunca se renderizan automáticamente. Esto permite almacenar fragmentos que se renderizarán de forma condicional: muestre un template de «sin resultados» solo cuando la búsqueda no devuelva ninguno, un template de error solo cuando falle la red y un esqueleto de carga durante la obtención de datos.
Templates anidados
Un template puede contener otros templates; los templates anidados permanecen inertes dentro del DocumentFragment del template exterior. Esto permite crear jerarquías similares a componentes, en las que un template exterior clona y activa los templates interiores según sea necesario.
Estilos con ámbito en templates
Los estilos dentro de la etiqueta <style> de un template no se aplican al documento; permanecen inertes hasta que se instancia el template y su contenido se mueve al DOM activo. Esto permite que los templates incluyan sus propios estilos sin contaminar la página.
template frente a innerHTML
El análisis de innerHTML es un procesamiento síncrono de cadenas HTML: el HTML se vuelve a analizar cada vez. template.cloneNode() copia un árbol que ya se ha analizado. Para renderizar repetidamente la misma estructura, clonar un template es más rápido y evita los riesgos de XSS de concatenar cadenas.
Limitaciones del enlace de datos
El elemento template no tiene enlace de datos integrado; debe buscar y completar manualmente cada clon. Para necesidades complejas de enlace de datos, es más apropiado usar un framework o una biblioteca. Los templates están pensados para patrones sencillos de renderizado manual sin la sobrecarga de un framework.
Compatibilidad con navegadores
El elemento template es compatible con todos los navegadores modernos (IE11 ofrecía compatibilidad parcial). En entornos que requieran compatibilidad con IE, use un polyfill que analice el contenido del template durante la inicialización. En proyectos modernos, use template sin polyfill.
Comprobación de conocimientos
¿Por qué se prefiere template.content.cloneNode(true) a innerHTML para renderizar repetidamente?
Resumen
El elemento template contiene fragmentos HTML inertes y previamente analizados. Clonar template.content crea instancias independientes para realizar el enlace de datos manualmente. Combinados con la asignación mediante textContent (sin XSS), los templates permiten renderizar listas de forma similar a un framework, crear interfaces condicionales y reutilizar patrones HTML usando únicamente las API estándar del navegador.
Preguntas frecuentes
¿La lección «Usar template para representar contenido con JavaScript» es gratis?
Sí — el texto completo de «Usar template para representar contenido con JavaScript» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Usar template para representar contenido con JavaScript»?
Combine plantillas con bucles de JavaScript para crear listas dinámicas Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Usar template para representar contenido con JavaScript»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento template: contenido inerte
- Clonar plantillas con cloneNode
- Usar template para representar contenido con JavaScript
- Plantillas frente a innerHTML: seguridad