Cannot set property 'innerHTML' of null

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.

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>");

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

Tags:

Javascript

Innerhtml

Onload

Recent Posts