Writing with script
Be careful when writing with script. If script is not available, that content will not be created.
You should limit your use of this to parts of the page that are not needed to access page content.
If you do write important parts of the page that are unavailable without scripting, you should use
<noscript> tags to provide an alternative.
Writing while the page is still loading
If your code is being executed while the page is still loading (in other words, if it is run as part of the initial page layout) put the following:
<script type="text/javascript">
document.write('<p>What ever you want to write<\/p>');
document.writeln('<p>What ever you want to write<\/p>');
//writeln puts a line break after the line.
//This is treated as a line break in the source of HTML
</script>It will write whatever you put, in whatever part of the page the script is currently running. Of course, you can include HTML tags in there too or some pre-programming.
Note that if you write content using an event handler (such as the onload handler for an image), it will be treated as if the page has completed loading, even if it has not.
Writing after the page has loaded
After the page has completed loading, the rules change. Instead of adding content to the page, it will replace the page. To do this, you should firstly open the document stream (most browsers will automatically do this for you if you just start writing). Then you should write what you want, and finally, you should close the document stream. Again, most browsers will automatically close the stream for you. The notable exception here is the Mozilla/Firefox family of browsers, that will continue to show a loading graphic until you close the stream. Some other browsers may fail to render part or all of the content. Just to be safe, make sure you always close the stream.
<script type="text/javascript">
window.onload = function () {
document.open();
document.write('<p>What ever you want to write<\/p>');
document.write('<p>More stuff you want to write<\/p>');
document.close();
};
</script>That will remove everything that is currently being shown and replace it with what you write in there. This is the equivalent of moving the user to a completely new page. You should put <html> tags and things like that in there too if you want to use that method.
You may notice that I close my HTML tags inside the script with a backslash before the forward slash in the closing tag. This is a requirement of the specification (and can cause the HTML validator not to validate your page if you forget it), although all browsers will understand if you omit the backslash.
However, since you can write HTML with script, you can write style or even script tags with it, making one script import another. If you omit the backslash on any </script> tags that you are writing with the script, the browser will read that as the closing tag for the current script, and your script will fail.
The same applies to opening or closing comments (although I fail to see why you would want to write comments using a script).
These can be written as '<'+'!--' and '-'+'->'. When the script runs, the plus
sign tells it to append the strings, creating a valid HTML comment.
Problems with old browsers
Although not in use any more, you may want to be nice to older browsers like Netscape 4. If using document.write to dynamically write a div element, do not give the div an inline style with left: or top: positioning. This will cause Netscape 4 to fail completely and be unrecoverable without careful use of dialogs and task kills.
Also, Netscape 4 will completely fail to load if you attempt to use this method to create a
<div style="position:absolute"> and instead, you should use the unnofficial
<layer> tag. You can use if( document.layers ) to
detect if the layer tag should be used.
Last modified: 19 March 2011