Question

I have a title bar on my web page that sets a message to the user. The title is created dynamically by JavaScript. I would like the content to appear without any visible delay in the page where the UL doesn’t contain any LI, and then suddenly they’re populated. Is this possible? What JavaScript DOM loading event do I want to use?

Answer 1

The reason you typically have to wait for the document to load (document.ready these days) is so that the element exists within the DOM so you can select it. If the element you need to modify already exists within the page, you won’t need to wait.

The following example won’t work

<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>
<div id="foo"></div>

It wont work because the DOM hasn’t loaded div#foo when the script is executed

The following example will work

<div id="foo"></div>
<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>

It works because div#foo has already been parsed and the element exists.

There’s no particular event that you can listen for with JavaScript for cross-browser node creation. But if your script can be placed after the element has been created, you can work with the element instantaneously.