Aprende a transformar arrays en UI real de forma mantenible: plantillas de render, estados de carga/vacío/error, actualización incremental y prevención de problemas comunes.
Render dinámico significa generar la interfaz a partir de datos, no escribir HTML fijo para cada caso.
El patrón es simple: estado -> función de render -> DOM. Lo difícil es mantener claridad cuando hay filtros, orden, errores y actualizaciones frecuentes.
Si diseñas bien el render desde el inicio, tu UI escala mejor y el código es más fácil de probar y depurar.
Objetivo de esta lección: construir renderizados limpios, eficientes y seguros para listas y tarjetas reales.
No manipules nodos sueltos sin estrategia: renderiza desde datos fuente claros.
Cuando el estado cambia (filtro, búsqueda, alta, borrado), la interfaz debe reflejar ese estado de forma determinista.
Evita mezclar lógica de datos con estilos/DOM en un único bloque largo; separa transformación, plantilla y pintado para ganar legibilidad.
Para listados sencillos, este patrón es rápido y legible.
Define una función que reciba datos y devuelva una cadena HTML con `map().join('')`.
Después, asigna una sola vez el resultado al contenedor. Evita concatenar `innerHTML` dentro de bucles.
Una lista robusta no solo muestra éxito: también gestiona ausencia de datos y fallos.
Antes de pintar resultados, define qué verá la persona usuaria cuando no haya elementos o cuando falle una carga.
Estos estados deben ser parte de tu función de render, no parches añadidos al final.
Cuando hay muchos nodos, minimiza escrituras repetidas sobre el DOM.
`DocumentFragment` permite construir nodos en memoria y anexarlos de una sola vez al contenedor.
Esto reduce reflows/repaints innecesarios y mejora la percepción de fluidez en listados grandes.
Con estas reglas, tu render será más predecible y fácil de escalar.
El mejor render no es el más corto, sino el que deja claro qué entra, qué sale y cómo evoluciona ante cambios de estado.
Antes de cerrar, revisa seguridad (contenido), experiencia (estados) y evolución (reutilización).
Aprende a transformar arrays en UI real de forma mantenible: plantillas de render, estados de carga/vacío/error, actualización incremental y prevención de problemas comunes.
Código del tema: map -> HTML · createElement · DocumentFragment
No manipules nodos sueltos sin estrategia: renderiza desde datos fuente claros.
Cuando el estado cambia (filtro, búsqueda, alta, borrado), la interfaz debe reflejar ese estado de forma determinista.
Evita mezclar lógica de datos con estilos/DOM en un único bloque largo; separa transformación, plantilla y pintado para ganar legibilidad.
Para listados sencillos, este patrón es rápido y legible.
Define una función que reciba datos y devuelva una cadena HTML con `map().join('')`.
Después, asigna una sola vez el resultado al contenedor. Evita concatenar `innerHTML` dentro de bucles.
const cursos = [
{ id: 1, titulo: 'JavaScript', nivel: 'medio' },
{ id: 2, titulo: 'CSS', nivel: 'pro' }
];
function renderCursos(lista) {
return lista
.map((curso) => `<li data-id="${curso.id}">${curso.titulo} · ${curso.nivel}</li>`)
.join('');
}
document.querySelector('#lista').innerHTML = renderCursos(cursos);Una lista robusta no solo muestra éxito: también gestiona ausencia de datos y fallos.
Antes de pintar resultados, define qué verá la persona usuaria cuando no haya elementos o cuando falle una carga.
Estos estados deben ser parte de tu función de render, no parches añadidos al final.
function renderEstado({ loading, error, items }) {
if (loading) return '<p>Cargando...</p>';
if (error) return `<p class="error">${error}</p>`;
if (!items.length) return '<p>No hay resultados.</p>';
return `<ul>${items.map((x) => `<li>${x}</li>`).join('')}</ul>`;
}Cuando hay muchos nodos, minimiza escrituras repetidas sobre el DOM.
`DocumentFragment` permite construir nodos en memoria y anexarlos de una sola vez al contenedor.
Esto reduce reflows/repaints innecesarios y mejora la percepción de fluidez en listados grandes.
const fragment = document.createDocumentFragment();
for (const producto of productos) {
const li = document.createElement('li');
li.textContent = `${producto.nombre} · ${producto.precio}€`;
fragment.appendChild(li);
}
lista.replaceChildren(fragment);Con estas reglas, tu render será más predecible y fácil de escalar.
El mejor render no es el más corto, sino el que deja claro qué entra, qué sale y cómo evoluciona ante cambios de estado.
Antes de cerrar, revisa seguridad (contenido), experiencia (estados) y evolución (reutilización).