Mostrar el resultado de un combate dentro del HTML, sin obligar al jugador a abrir la consola, requiere generar elementos nuevos desde JavaScript. Aquí aprenderás a usar createElement y appendChild para insertar mensajes dinámicos en el DOM cada vez que ocurre un ataque en Mokepon.
Por qué innerHTML no basta para mostrar varios ataques
Hasta ahora venías modificando el contenido de un párrafo existente con innerHTML, pero eso reemplaza el mensaje anterior en lugar de acumularlo. Si quieres un historial de combate, necesitas crear un párrafo nuevo por cada ronda.
El plan es claro: cada vez que el jugador presione un botón de ataque y el enemigo responda con su ataque aleatorio, se inserta un nuevo <p> dentro de la sección con id mensajes. Y aquí viene lo interesante, para lograrlo entran dos métodos del DOM que vale la pena conocer a fondo [02:18].
¿Qué hace document.createElement? Crea un elemento HTML desde JavaScript. Le pasas el nombre de la etiqueta (por ejemplo 'p') y devuelve ese nodo listo para configurar, aunque todavía no aparece en la página.
Cómo crear el párrafo del ataque con createElement
La función crearMensaje se manda a llamar justo después del ataque aleatorio del enemigo, porque en ese punto ya tienes ambos valores: el del jugador y el del rival [04:10].
Dentro de esa función defines una variable parrafo y la igualas a document.createElement('p'). Visual Studio Code te sugerirá variantes como element, attribute, comment o textNode, pero para este caso usas element con la etiqueta p.
Luego le inyectas el contenido con innerHTML, concatenando las variables globales ataqueJugador y ataqueEnemigo:
javascript
function crearMensaje() {
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + ' - Pendiente'
}
Nota cómo aprovechas las variables globales: aunque se asignaron dentro de las funciones de ataque, también puedes leerlas desde crearMensaje. El resultado de ganar, perder o empatar queda como Pendiente porque esa lógica llega en la siguiente clase.
Qué pasa si llamas mal a la función
Un detalle importante: si escribes creatMensaje en lugar de crearMensaje, la consola te lanzará un error de función no definida. Es un typo común y JavaScript te lo señala de inmediato.
Cómo insertar el párrafo con appendChild en el DOM
Crear el elemento no es suficiente. JavaScript no adivina dónde colocarlo, así que necesitas indicarle el contenedor de destino [09:45].
¿Qué hace appendChild? Toma un elemento creado con JavaScript y lo inserta como hijo dentro de otro elemento existente del HTML. Se escribe con doble P: appendChild, donde child significa hijo en inglés.
Primero seleccionas la sección destino con getElementById, luego llamas a appendChild pasándole el párrafo:
javascript
function crearMensaje() {
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + ' - Pendiente'
sectionMensajes.appendChild(parrafo)
}
Al recargar la página y pulsar fuego, agua o tierra, aparece un párrafo nuevo por cada combate, sin borrar los anteriores. Ya tienes el historial de la pelea visible en pantalla.
Qué métodos del DOM combinaste en este flujo
Tres herramientas trabajando juntas, cada una con un rol específico:
- createElement: genera el nodo HTML en memoria a partir del nombre de la etiqueta.
- innerHTML: rellena el contenido interno del nodo con texto y variables concatenadas.
- appendChild: agrega ese nodo como hijo dentro de un contenedor del DOM.
¿Cuándo conviene usar createElement en vez de innerHTML? Cuando necesitas acumular elementos sin sobrescribir lo anterior, como un historial, una lista de comentarios o, en este caso, un registro de ataques.
La documentación de MDN para createElement y appendChild es la referencia recomendada para profundizar en parámetros y casos de uso. Antes de avanzar, prueba atacar con los tres tipos y revisa cómo se va apilando cada mensaje en la sección.
¿Ya lograste que aparezcan los mensajes en tu Mokepon? Cuéntame en los comentarios qué ataque te salió primero y si tu enemigo aleatorio te complicó el combate.
