Renderizar un array en HTML con JavaScript te permite pasar de una página estática a una dinámica, donde cada objeto del arreglo se convierte en un elemento visible sin escribir tarjetas a mano. Es la base de cómo funcionan los e-commerce, los catálogos y cualquier interfaz que muestre listas de productos o personajes.

En el proyecto Mokepon, ya tienes un arreglo con tres objetos, cada uno con propiedades como nombre y photo. El siguiente paso es leer esa información con un método de iteración y construir el HTML automáticamente, sin importar si tienes 3 o 1.000 personajes.

¿Cómo paso de un HTML manual a uno dinámico con JavaScript?

El problema con escribir cada tarjeta a mano aparece cuando cambias de 3 a 10 personajes: tendrías que reescribir toda la estructura. La solución es eliminar las tarjetas estáticas del HTML y dejar solo un contenedor vacío que JavaScript pueda llenar.

En el HTML borras los bloques fijos de cada Mokepon y dejas un div con un identificador claro:

html

<div id="contenedor-tarjetas"></div>

Ese contenedor es el punto de entrada. Desde JavaScript lo seleccionas con document.getElementById y lo guardas en una constante, porque ese elemento no va a cambiar durante la ejecución [03:45].

javascript const contenedorTarjetas = document.getElementById('contenedor-tarjetas')

¿Cuándo uso const en lugar de let? Usa const cuando la variable apunta a un valor que no vas a reasignar, como un elemento del DOM que siempre estará ahí. Usa let cuando el valor sí va a cambiar.

¿Qué hace forEach y cómo lo uso para recorrer un arreglo?

El método forEach recorre cada elemento de un arreglo y ejecuta una función para cada uno. La traducción literal es "por cada elemento, haz algo", y es ideal cuando necesitas trabajar con todos los objetos sin importar cuántos sean [02:10].

Dentro de la función iniciarJuego, llamas al arreglo y le aplicas forEach:

javascript mokepones.forEach((mokepon) => { console.log(mokepon.nombre) })

En esta línea, mokepon representa cada objeto individual durante la iteración. Si imprimes mokepon.nombre, obtienes el nombre de cada personaje uno por uno. Así accedes a las propiedades de cada objeto sin escribir su índice manualmente.

¿Qué son los template literals y cómo inyecto variables en HTML?

Los template literals son cadenas de texto que usan comillas invertidas en lugar de comillas simples o dobles. Su gran ventaja es que permiten mezclar HTML con valores de variables usando la sintaxis ${} [04:30].

¿Qué es un template literal en JavaScript? Es una cadena delimitada por backticks que admite variables y expresiones dentro de ${}, ideal para construir HTML dinámico sin concatenar strings.

Dentro de forEach, declaras una variable que va a guardar la estructura HTML de cada tarjeta:

javascript let opcionDeMokepones = ''

mokepones.forEach((mokepon) => { opcionDeMokepones += <input type="radio" name="mascota" id="${mokepon.nombre}" /> <label class="tarjeta-de-mokepon" for="${mokepon.nombre}"> <p>${mokepon.nombre}</p> <img src="${mokepon.photo}" alt="${mokepon.nombre}" /> </label> })

contenedorTarjetas.innerHTML = opcionDeMokepones

Fíjate en un detalle clave: el operador +=. Si solo usaras =, cada iteración sobrescribiría la anterior y al final solo verías la última tarjeta. Con += vas acumulando el HTML de los tres personajes en la misma variable [06:20].

¿Por qué necesito conservar la clase CSS en la plantilla?

La propiedad class dentro del template literal no es decorativa: cuando JavaScript renderiza ese string como HTML, el navegador aplica los estilos asociados a esa clase. Si la omites, las tarjetas aparecen sin diseño, sin bordes, sin tipografía. La clase es el puente con el CSS.

¿Qué hace innerHTML y por qué importa el operador +=?

La propiedad innerHTML reemplaza todo el contenido interno de un elemento del DOM con el string que le pases. Es la instrucción final que toma la estructura acumulada y la inyecta dentro del contenedor.

javascript contenedorTarjetas.innerHTML = opcionDeMokepones

Con esa línea, las tres tarjetas aparecen renderizadas en pantalla, cada una con el nombre y la foto que vienen del objeto correspondiente. Si mañana agregas 50 mokepones más al arreglo con mokepones.push(nuevoMokepon), las 53 tarjetas se renderizan automáticamente sin tocar el HTML.

¿Cuál es la diferencia entre una página estática y una dinámica? Una página estática tiene contenido fijo escrito a mano. Una dinámica genera su contenido con JavaScript a partir de datos, como un arreglo o una base de datos en formato JSON.

¿Cómo aplico esto a un proyecto real como un e-commerce?

El mismo patrón que usas para renderizar mokepones es el que usan las tiendas virtuales para mostrar productos. La información vive en una base de datos, se entrega al frontend como un JSON (que en JavaScript se traduce a un arreglo de objetos), y un forEach con template literals construye las tarjetas de producto.

Las piezas que ya dominas son:

• Selección de un contenedor del DOM con document.getElementById.
• Iteración sobre arreglos con forEach.
• Acceso a propiedades de objetos con la notación de punto.
• Construcción de HTML dinámico con template literals y ${}.
• Inyección del resultado en el DOM con innerHTML.

Queda un detalle pendiente: las variables que escuchan los clics de los botones siguen apuntando a elementos que ahora se generan dinámicamente, y eso provoca un problema de referencias que se resuelve en la siguiente clase.

¿Ya probaste duplicar el arreglo de mokepones para ver cómo se renderizan seis tarjetas sin tocar el HTML? Cuéntame en los comentarios qué resultado obtuviste.