Does "innerHTML" depend on eventhandlers?

Question

first one:

function change(){
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
}

second one:

document.getElementById("test1").innerHTML="hwllo world";

The first one is working fine. But the second one is not working when the file is loaded.

I assume the 2nd example is running before the DOM is ready. Put it in a ready event handler or move the script to the end of the body so the element it refers to exists by the time the script is parsed. — James Allardice, May 29 '13 at 07:00
What browser are you using? Where did you put the JavaScript code? Please provide an example. — David, May 29 '13 at 07:07
in second case your code was not get executed. so you have to put it in a auto startup function.Check my answer. — Sudarshan, May 29 '13 at 07:24

score 2 · Answer 1 · answered May 29 '13 at 07:11

Javascript and HTML rendering are executed in the sequence they are found in the file. So if you're executing a piece of JS before an HTML element is rendered then the JS code wouldn't work.

This will fail:

<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>

This will work as expected:

<div id="test1"></div>
<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>

Alternatively you can use the various onload and dom ready events to make sure that your script executes after all the HTML have been rendered:

<script>
  window.onload = function(){
    document.getElementById("test1").innerHTML="hwllo world";
  }
</script>
<div id="test1"></div>

score 2 · Answer 2 · answered May 29 '13 at 07:12

And what error is in console? May be you are trying to set innerHTML of not existing node? If you want to manipulate with divs, you have to do it after the page is loaded, so typically call this as body event onLoad:

<script>
function init() {
  document.getElementById("test1").innerHTML="hello world";
}
</script>

<body onload="init();">
<div id="test1"></div>
...

score 1 · Answer 3 · answered May 29 '13 at 07:09

As James Allardice said in his comment, the code is probably executed before the DOM is ready. Your code could then fail as the element might not be there. This is a known problem, but there is also a known solution. The most used solution is probably to use jQuery, which has an easy way to allow a function to only be executed after the document is ready. To use this method, first you need to include jQuery as a script reference and then modify your code as follows:

$(document).ready(function() {
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
});

Now if you are using jQuery anyways, you can also rewrite your code to use jQuery selectors and make it a bit more compact:

$(document).ready(function() {
    $("#clr").css("backgroundColor", "red");
    $("#test1").html("hwllo world");
});

Both pieces of code are functionally equivalent.

Does "innerHTML" depend on eventhandlers?

3 Answers3