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

Answer 1

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>