Tengo un problema con la ubicación del botón de reinicio en el juego de adivinanzas en developer.mozilla.org dentro de una página web, porque está mal colocado.

Comencé a aprender JavaScript y estaba siguiendo el tutorial en https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash con el juego de adivinanzas y quiero incorporar el juego de adivinanzas en una web. página para ver cómo puedo ejecutar el juego en un contenedor div. Todo funciona bien hasta que el juego termina o se gana y aparece el botón 'Iniciar nuevo juego' y document.body.appendchild(resetButton); es ejecutado.

El botón se coloca al final de mi página después del pie de página y no dentro del contenedor div. ¿Qué estoy haciendo mal y qué puedo mirar para cambiar el código para que aparezca en la parte inferior del contenedor debajo de la barra 'Ingresar la suposición' como en el ejemplo?

En el ejemplo, todo está debajo de las etiquetas del cuerpo, pero he creado una debajo de la página para ejecutar el juego.

También he intentado ejecutar document.body.append(resetButton); e incluso cambió el .body a document.div.appendchild(resetButton); código para ver si puedo colocarlo en el lugar correcto. Cuando cambio el código .body, me da un error indefinido al agregar.

Answer

Creo que puedes usar insertAdjacentElementel método, te permite definir la posición de inserción.

Acepta estos valores:

'beforebegin' : antes del propio targetElement.

'afterbegin': Justo dentro de targetElement, antes de su primer hijo.

'beforeend': Justo dentro de targetElement, después de su último hijo.

'afterend': después del propio targetElement.


Ejemplo:

document.body.insertAdjacentElement('afterbegin', element);