Now using document.write had several disadvantages. It could only be used before the page finished loading and either the statement itself or a function call that called the function containing it had to be embedded into the HTML at the spot in the page where the output of the document.write was to be written (that's whyt the original falling snow script had to call the startSnow() function from a script within the body of the page instead of using an onload event handler). It is not therefore possible to use document.write in an unobtrusive script.
Here's the document.write statement from the original script (it actually needs to be all on one line but it is wrapped onto several lines here to make it easier to read without having to scroll left and right).
document.write('<div id="snow' + i + '" style="position: absolute; z-index: ' + i + '; visibility:hidden; "><img src="' + snowflakes[Math.floor(Math.random() * snowflakes.length)] + '" border="0"></div>');
The corresponding DOM calls in the new script are below with the first five lines creating the div tag and the next three creating the img tag.The second last line inserts the img tag inside the div tag, and the last line adds the two tags into the bottom of the body of the page (which is where the function containing the document.write is called from in the original script).
While in this particular script we are adding the new content (the snowflakes) to the very end of the HTML, you can use DOM commands to insert (or replace or delete) content after or within any tag in the web page simply by using an appropriate call (or series of calls) that locates it within the document object model.
Next: setTimeout and setInterval.
This article written by Stephen Chapman, Felgall Pty Ltd.