0

I have started to learn JavaScript and was going through the tutorial on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash with the guess game and want to incorporate the guess game into a web page to see how I can ran the game in a div container. All works fine up to when the game is over or the game is won and the 'Start new game' button comes up and the document.body.appendchild(resetButton); is executed.

The button is placed at the end of my page after the Footer and not inside the div container. What am I doing wrong and what can I look at to change the code to let it come up at the bottom of the container under the 'Enter the guess' bar as in the example?

In the example everything is under the body tags, but I have created a under the page to run the game in.

I have also tried to run document.body.append(resetButton); and even changed the .body to document.div.appendchild(resetButton); code to see if I can place it at the correct spot. When I change the .body code it gives me an undefined error on append.

Sarmeda
  • 1
  • 1

1 Answers1

0

I think you can use insertAdjacentElement method, it allows you define the inserting position.

It accepts these values:

'beforebegin': Before the targetElement itself.

'afterbegin': Just inside the targetElement, before its first child.

'beforeend': Just inside the targetElement, after its last child.

'afterend': After the targetElement itself.

Example:

document.body.insertAdjacentElement('afterbegin', element);
Pooria Faramarzian
  • 65
  • 1
  • 3
  • Hi Pooria, thanks for the hint. It is a good tip, but I have so far tried with the document.body.insertAdjacentElement('afterbegin', element); but it has only removed all the elements I tried, and still leave the new start button at the end of the page. If I try any of the others, 'beforebegin', beforeend' and afterend, it just removes the elements to a position around the restart button at the end of the page. – Sarmeda Jan 15 '22 at 15:32
  • HI pooria, like I said. You did put me on the right track. The syntax was Element.insertAdjacentElement('afterend', Element); It is still not at the right spot, but close enough. Much appreciated. – Sarmeda Jan 15 '22 at 16:27