La idea clave
No todos los elementos de una web tienen que estar escritos en el HTML inicial. Puedes crear uno nuevo desde JavaScript e incorporarlo a una lista.
Ejemplo paso a paso
Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.
Ejemplo explicado{ js }
const nuevo = document.createElement('li');
nuevo.textContent = 'Aprender DOM';
document.querySelector('#lista').append(nuevo);
Editar y probar este mismo ejemplo ↓
- createElement crea un elemento li, pero todavía no lo muestra.
- textContent coloca las palabras dentro de ese nuevo elemento.
- append lo añade a la lista visible.
Practica con código
Antes de empezar, piensa: ¿Cuántos elementos visibles habrá después de ejecutar?
Crea otro li con el texto «Practicar» y añádelo a la misma lista.
El resultado que buscamosLa lista debe tener tres elementos: el inicial y los dos añadidos.
HTML + CSS + JS Practica aquí
Tu misiónCrea otro li con el texto «Practicar» y añádelo a la misma lista.
Vista previa aislada · Sin acceso al sitio principal
ConsolaLista para ejecutar.
Sin comprobar
Escribe tu cambio y pulsa «Comprobar solución». Puedes intentarlo tantas veces como quieras.
Listo
Necesito una pista
Repite las tres líneas con otro nombre de variable.
Una pista más
Utiliza createElement('li'), textContent y append en ese orden.
Ver solución y explicación
const otro = document.createElement('li');
otro.textContent = 'Practicar';
document.querySelector('#lista').append(otro);
Qué debes recordar: createElement crea un nodo y append lo inserta en la página.
Práctica pendiente de corregir
La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.
Revisado editorialmente · Referencia técnica específica ↗