Why is document.body null in my javascript?

Question

Here is my brief HTML document.

Why is Chrome Console noting this error:

\"Uncaught TypeError: Cannot call method \'appendChild\' of nul

Answer 1

Your script is being executed before the body element has even loaded.

There are a couple ways to workaround this.

• Wrap your code in a DOM Load callback:

  Wrap your logic in an event listener for DOMContentLoaded.

  In doing so, the callback will be executed when the body element has loaded.

  document.addEventListener('DOMContentLoaded', function () {
      // ...
      // Place code here.
      // ...
  });
  

  Depending on your needs, you can alternatively attach a load event listener to the window object:

  window.addEventListener('load', function () {
      // ...
      // Place code here.
      // ...
  });
  

  For the difference between between the DOMContentLoaded and load events, see this question.

• Move the position of your