Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Crear y eliminar elementos
document.createElement te permite construir elementos nuevos desde JavaScript, append los inserta en la página y remove los elimina. Con esto puedes generar contenido dinámico que no existía en el HTML original.
Explicación
Hasta ahora modificabas elementos que ya existían en el HTML. Estos métodos te permiten crear elementos nuevos desde JavaScript y quitarlos cuando ya no los necesitas:
document.createElement("etiqueta")Crea un elemento nuevo en memoria (como un <li> o un <button>), pero todavía no aparece en la página.
elemento.append(hijo)Inserta hijo dentro de elemento, al final de su contenido. El elemento aparece en la página en cuanto se agrega.
elemento.remove()Elimina el elemento de la página por completo.
Reto rápido
Agrega un segundo producto inicial llamando a agregarProducto("Pan"); justo después de agregarProducto("Leche");.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Un elemento creado con createElement no aparece en la página hasta que lo agregas con append (o un método similar) a un elemento que sí esté en el HTML.
Dato extra
Cada botón de eliminar se crea junto con su propio producto y guarda una referencia directa a item dentro de su addEventListener, así que siempre sabe exactamente qué elemento debe eliminar, sin importar cuántos productos haya en la lista.
Error común
Crear el elemento con createElement y olvidar agregarlo con append: el código no marca ningún error, pero el elemento nunca aparece en la página porque nunca se agregó al DOM.
Siguiente paso
Ya sabes seleccionar, modificar, crear y eliminar elementos del DOM. En el siguiente módulo vas a profundizar en addEventListener y los distintos tipos de eventos, para que tus páginas reaccionen a mucho más que un simple clic.
Próximo módulo (pronto)