innerHtml not working for nested div tags


I am not able to replace .innerHtml for a div tag which is nested in other div tags. I used firebug to make sure that getElementById() is working.

<div class="a">
<div class="b"><a href="myUrl"><div id="hello"></div></a></div>
</div>

In javascript code I am using:

document.getElementById("hello").innerHTML = "hello world";

Using firebug, I have verified that "hello" div is picked up (that is, it is not null). But the string "hello world" is not showing up. Kindly help. Thanks.

use innerHTML rather than innerHtml. note the capitalization.

On a side note, IE also supports innerText.


The example you provided works for me... so, I think you should make sure that the script is executed after the element has been created in the DOM.

For example, place the script element after the div you want to add contents to. So if this fixes the issue, then you should add an event listener to the window’s onload event which will run all scripts.

And as Amaan said, don’t place a div element inside an a element.