Cannot set property InnerHTML of null

Question

I've a simple html page with no code in the body tag. I want to insert the html in the body tag through javascript.

My javascript file looks like this.

var Global={
    UserWall:function(){
          return "a very long html code";
   }
};

    var globalObject=Object.create(Global);
   document.getElementsByTagName("body").item(0).innerHTML=globalObject.UserWall();

Now I want this very long html code to be auto inserted in the body tag on page load. But it is giving me the error I've mentioned in the title.Why?

and also is this the correct way to create ajax based website(no page reloads) meaning that if I called server side script to update this very long html code and appended it to the body of the page.

apsillers · Accepted Answer · 2013-02-11T20:55:02.127

You are almost certainly running your code before the DOM is constructed. Try running your code in a window.onload handler function (but see note below):

window.onload = function() {
    // all of your code goes in here
    // it runs after the DOM is built
}

Another popular cross-browser solution is to put your <script> block just before the closing </body> tag. This could be the best solution for you, depending on your needs:

<html>
  <body>

    <!-- all of your HTML goes here... -->

    <script>
        // code in this final script element can use all of the DOM
    </script>
  </body>
</html>

Note that window.onload will wait until all images and subframes have loaded, which might be a long time after the DOM is built. You could also use document.addEventListener("DOMContentLoaded", function(){...}) to avoid this problem, but this is not supported cross-browser. The bottom-of-body trick is both cross-browser and runs as soon as the DOM is complete.

hey can you tell me this is the right way to develop the ajax application by appending the text to the body at runtime? — Mj1992, Jun 23 '12 at 09:21

score 5 · Answer 2 · answered Apr 12 '13 at 09:36

I have done all the solutions mentionned here. but they didn't work until i have made this one using Jquery :

in my HTML page :

> <div  id="labelid" > </div>

and when i click on a button, i put this in my JS file :

$("#labelid").html("<label>Salam Alaykom</label>");

TheZ · Answer 3 · 2012-06-22T19:55:08.427

4

Is this running in the <head> of the html? If so, you need to make sure the <body> tag has actually loaded first.

You need to use an onload handler, for example: http://javascript.about.com/library/blonload.htm

edited Jun 22 '12 at 19:55

answered Jun 22 '12 at 19:49

TheZ

3,463
15
29

it is running in an external script – Mj1992 Jun 22 '12 at 19:50
Doesn't matter. _When_ are you loading it in? If it's included in the `` tag it still runs immediately. – TheZ Jun 22 '12 at 19:50
it is not picking up the body tag don't know why – Mj1992 Jun 22 '12 at 19:53
1

That's your problem then. It is in the `` tag! It comes _before_ the `` tag. Hence, the content hasn't loaded. There _isn't_ a body tag yet. Use an onload handler. http://javascript.about.com/library/blonload.htm – TheZ Jun 22 '12 at 19:54

score 0 · Answer 4 · answered Jun 22 '12 at 19:48

0

maybe this will work: document.getElementsByTagName("body")[0].innerHTML

answered Jun 22 '12 at 19:48

akonsu

26,172
26
106
175

Cannot set property InnerHTML of null

4 Answers4

Linked