92Part IIJavaScript (Starting a web site) Tutorialdocument.write() methodThe document.write()method operates in both
92Part IIJavaScript Tutorialdocument.write() methodThe document.write()method operates in both immediate scripts to create content inapage as it loads and in deferred scripts that create new content in the same or different window. The method requires one string parameter, which is the HTML content to write tothe window or frame. Such string parameters can be variables or any other expressions thatevaluate to a string. Very often, the written content includes HTML tags. Bear in mind that after a page loads, the browser s output streamautomatically closes. Afterthat, any document.write()method issued to the current page opens a new stream thatimmediately erases the current page (along with any variables or other values in the originaldocument). Therefore, if you wish to replace the current page with script-generated HTML, you need to accumulate that HTML in a variable and perform the writing with just one docu- ment.write()method. You don t have to explicitly clear a document and open a new datastream; one document.write()call does it all. One last piece of housekeeping advice about the document.write()method involves itscompanion method, document.close(). Your script must close the output stream whenitfinishes writing its content to the window (either the same window or another). After the last document.write()method in a deferred script, be sure to include a document.close()method. Failure to do this may cause images and forms not to appear. Also, anydocument.write()method invoked later will only append to the page, rather than clear theexisting content to write anew. To demonstrate the document.write()method, I show twoversions of the same application. One writes to the same document that contains the script; the other writes to a separate window. Type in each document in a new text editor document, save it with an .htmlfilename extension, and open it in your browser. Listing 8-2 creates a button that assembles new HTML content for a document, includingHTML tags for a new document title and color attribute for the
tag. An operator in the listing that may be unfamiliar to you is +=. It appends a string on its right side to whateverstring is stored in the variable on its left side. This operator is a convenient way to accumulatea long string across several separate statements. With the content gathered in the newContentvariable, one document.write()statement blasts the entire new content to the same docu- ment, obliterating all vestiges of the content of Listing 8-2. The document.close()statement, however, is required to close the output stream properly. When you load this document andclick the button, notice that the document title in the browser s title bar changes accordingly. As you click back to the original and try the button again, notice that the dynamically writtensecond page loads much faster than even a reload of the original document. Listing 8-2:Using document.write() on the Current Window