If you get the error Uncaught TypeError: Cannot read property 'appendChild' of null when using the document.body object, it is most likely because the body has not been defined yet.

If document.body is null, you most likely need to execute your code in the window.onload function.

Let's check this example:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      const p = document.createElement('p');
      p.innerHTML = 'Lorem ipsum';
      document.body.appendChild(p);
    </script>
    <title>Appending an element to body</title>
  </head>
  <body>
    This is a text
  </body>
</html>

Since the JavaScript code is executed before the HTML body tag has loaded, document.body is null.

Executing the code inside the window.load function fixes the problem:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      window.onload = () => {
        const p = document.createElement('p');
        p.innerHTML = 'Lorem ipsum';
        document.body.appendChild(p);
      };
    </script>
    <title>Appending an element to body</title>
  </head>
  <body>
    This is a text
  </body>
</html>

Another option is to move the script at the end of the body tag, once it's been loaded:

<!DOCTYPE html>
<html>
  <head>
    <title>Appending an element to body</title>
  </head>
  <body>
    This is a text
    <script type="text/javascript">
      const p = document.createElement('p');
      p.innerHTML = 'Lorem ipsum';
      document.body.appendChild(p);
    </script>
  </body>
</html>