Muestra una lista de datos en la página

La idea clave

Cuando ya tienes datos en un array, puedes recorrerlos y crear un elemento visible para cada uno. El resultado mantiene la información de la página sincronizada con los datos.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

const nombres = ['Ana', 'Luz'];
const lista = document.querySelector('#lista');
lista.replaceChildren();
for (const nombre of nombres) {
  const item = document.createElement('li');
  item.textContent = nombre;
  lista.append(item);
}

Editar y probar este mismo ejemplo ↓

1. nombres contiene dos cadenas.
2. replaceChildren borra los elementos anteriores para no duplicarlos.
3. El for...of crea un li por cada nombre y lo añade a la lista.

Practica con código

Antes de empezar, piensa: ¿Cuántos elementos quedarán al final?

Añade «Leo» al array y ejecuta: no toques el HTML.