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 null      lt html gt   lt head gt       lt title gt Javascript Tests lt  title gt        lt script type  text javascript  gt           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           lt  script gt   lt  head gt   lt body gt    lt  body gt   lt  html gt

User · Answer

Browser parses your html from top down  your script runs before body is loaded  To fix put script after body      lt html gt     lt head gt          lt title gt  Javascript Tests  lt  title gt      lt  head gt    lt body gt    lt  body gt     lt script type  text javascript  gt       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       lt  script gt   lt  html gt

User · Answer

Or add this part   lt script type  text javascript  gt       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       lt  script gt    after the HTML  like        lt html gt       lt head gt     lt  head gt       lt body gt     lt  body gt      lt script type  text javascript  gt          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           lt  script gt        lt  html gt

User · Answer

Add your code to the onload event  The accepted answer shows this correctly  however that answer as well as all the others at the time of writing also suggest putting the script tag after the closing body tag      This is not valid html  However it will cause your code to work  because browsers are too kind     See this answer for more info Is it wrong to place the  lt script gt  tag after the  lt  body gt  tag   Downvoted other answers for this reason

User · Answer

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  lt script gt  element  and load JavaScript last   Right now  your  lt script gt  element is being loaded in the  lt head gt  element of your document  This means that it will be executed before the body has loaded  Google developers recommends moving the  lt script gt  tags to the end of your page so that all the HTML content is rendered before the JavaScript is processed    lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt     lt p gt Some paragraph lt  p gt     lt  -- End of HTML content in the body tag -- gt      lt script gt       lt  -- Place your script tags here  -- gt     lt  script gt   lt  body gt   lt  html gt

User · Answer

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  lt body gt  tag  as mentioned by e-bacho 2 0     lt head gt       lt title gt Javascript Tests lt  title gt        lt script type  text javascript  gt        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                   lt  script gt   lt  head gt    See demo

User · Answer

document body is not yet available when your code runs   What you can do instead   var docBody document getElementsByTagName  body   0   docBody appendChild mySpan

[javascript] Why is document.body null in my javascript?

Examples related to javascript

Examples related to google-chrome