Why is document.body null in my javascript?

by

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.

More Related Contents:

  1. How can I get the current Crome URL?
  2. Chrome extension that enables chatting with users on same page [closed]
  3. Is Chrome’s JavaScript console lazy about evaluating objects?
  4. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  5. Find out whether Chrome console is open
  6. How to import ES6 modules in content script for Chrome Extension
  7. new Date() is working in Chrome but not Firefox
  8. Using Chrome, how to find to which events are bound to an element
  9. Unchecked runtime.lastError while running tabs.executeScript?
  10. How do I auto-reload a Chrome extension I’m developing?
  11. Editing in the Chrome debugger
  12. Upload File as a Form Data through chrome extension
  13. Getting Chrome to prompt to save password when using AJAX to login
  14. Chrome JavaScript developer console: Is it possible to call console.log() without a newline?
  15. How to pass a function in Puppeteers .evaluate() method?
  16. Chrome javascript debugger breakpoints don’t do anything?
  17. Is it possible for XHR HEAD requests to not follow redirects (301 302)
  18. How to get the currently opened tab’s URL in my page action popup?
  19. Using ‘let’ as a variable name is not throwing any errors in google v8
  20. How to find JS Memory Leaks?
  21. Is it possible to remove “Inspect Element”?
  22. Javascript / Chrome – How to copy an object from the webkit inspector as code
  23. Chrome violation : [Violation] Handler took 83ms of runtime
  24. Making a window pop under in chrome
  25. Disable brower’s auto scroll after a page refresh?
  26. Chrome extension identity.email empty
  27. Programmatically accessing function scope using Chrome DevTools console
  28. Can’t pass arguments to chrome.declarativeContent.SetIcon
  29. Chrome userscript error: “Unsafe JavaScript attempt to access frame”
  30. HTML5 Notification not working in Mobile Chrome

Leave a Comment