Home/ Questions/Q 7701897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:06:13+00:00

Here is my brief HTML document. Why is Chrome Console noting this error: Uncaught

  • 0

Here is my brief HTML document.

Why is Chrome Console noting this error:

“Uncaught TypeError: Cannot call method ‘appendChild’ of null“?

<html>
<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">

        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>
</head>
<body>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The body hasn’t been defined at this point yet. In general, you want to create all elements before you execute javascript that uses these elements. In this case you have some javascript in the head section that uses body. Not cool.

    You want to wrap this code in a window.onload handler or place it after the <body> tag (as mentioned by e-bacho 2.0).

    <head>
    <title>Javascript Tests</title>

    <script type="text/javascript">
      window.onload = function() {
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");
      }

    </script>
</head>

    See demo.

    • 0