Can I assign an HTML string to the innerHTML property of a HTML DOM node?

Question

I want to populate html elements from a given string and this seems to not update the html inside the dynamic-content div:

In index.html:

<div id='dynamic-content'>
</div>

In index.js:

var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';

Did I just not test this well?

Edit: I was assigning to `innerHtml` NOT `innerHTML`

Updating question now. Basically, the innerHTML just doesn't seem set. — tarabyte
– tarabyte, Commented Jan 27, 2015 at 21:59
That seems to work; so, are you correctly linking to your index.js file? And have you read this question: "Why does jQuery or a DOM method such as getElementById() not find the element?" — David Thomas
– David Thomas, Commented Jan 27, 2015 at 22:00

Shomz · Accepted Answer · 2015-01-27 22:00:39Z

2

Works perfectly fine.

Assuming that you load the JS file in the header, and thus the DOM is not ready (the div doesn't exist at the time the JS executes), so you can wrap the whole thing in a window.onload callback or load the JS file at the very end of the HTML body.

See the difference between the two examples below reflecting what actually happens if you load the JS before and after the HTML.

Non-working version:

<script>var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';</script>
<div id='dynamic-content'>
</div>

Working version:

<div id='dynamic-content'>
</div>
<script>var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';</script>

Non-working version made working using the onload callback:

<script>
  window.onload = function(){
    var dynamicContentNode = document.getElementById('dynamic-content');
    dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';
  }
</script>
<div id='dynamic-content'>
</div>

answered Jan 27, 2015 at 22:00

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

CoderDennis Over a year ago

After adding the non-working version, your working version doesn't work. I've never seen this code snippet feature before. Very cool. Not sure how I missed it.

Shomz Over a year ago

Snippets are quite young here. What do you mean it doesn't work? The first one is supposed to fail, while the other two work fine.

CoderDennis Over a year ago

None of them display anything in the results section when I try them.

Shomz Over a year ago

Did you hit the run button?

CoderDennis Over a year ago

Yes. I'm hitting the run button. The first version of your answer worked just fine. Your javascript is no longer within the js portion of the snippet. Could that be the problem?

|

Collectives™ on Stack Overflow

Can I assign an HTML string to the innerHTML property of a HTML DOM node?

Edit: I was assigning to `innerHtml` NOT `innerHTML`

1 Answer 1

Non-working version:

Working version:

Non-working version made working using the onload callback:

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit: I was assigning to innerHtml NOT innerHTML

1 Answer 1

Non-working version:

Working version:

Non-working version made working using the onload callback:

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Edit: I was assigning to `innerHtml` NOT `innerHTML`