Crear e insertar: createElement, append y remove

Hasta ahora modificas elementos que el HTML ya traía. Pero "Mi Bolsillo" real arranca con una lista VACÍA y la llena con datos: un <li> por cada gasto del array. Hoy aprendes a fabricar elementos desde cero e instalarlos donde quieras — el corazón de toda interfaz dinámica.

El taller y la sala

Fabricar, preparar, instalar

Los cuatro verbos de ubicación: padre.append(hijo) al final de los hijos, padre.prepend(hijo) al principio, elemento.before(otro) y elemento.after(otro) como hermanos. Y el error clásico del arranque: fabricar el elemento, prepararlo perfecto… y olvidar el append. No hay error en consola — simplemente no aparece nada, porque el mueble se quedó en el taller.

Del array a la pantalla

El patrón estrella — el que ejecuta cada app que muestra datos: un array de objetos (módulo 5), un recorrido, un elemento por dato:

Léelo como una frase: "por cada gasto, fabrica un li, ponle el nombre y el valor formateado, instálalo en la lista". Agrega un quinto gasto al array y mira la lista crecer sola — los DATOS mandan, el DOM obedece. Esa separación es la idea central de React y compañía; aquí la estás haciendo a mano para entenderla de verdad.

Mini-reto

Sobre el segundo playground: 1) agrega la propiedad categoria a cada gasto y haz que el li la muestre entre paréntesis; 2) crea un li extra "TOTAL — ..." usando reduce (módulo 4) + el formateador, e instálalo al final; 3) remata con lista.prepend(...) de un gasto nuevo y confirma que aparece de primero.

Qué sigue

Tus elementos ya nacen con texto, pero les falta identidad: la clase que los pinta, el atributo que los describe, el dato que llevan pegado. La próxima lección: atributos, classList y los data-* — la memoria privada que cada elemento puede cargar.