Basic Document Methods

Historically, the Document object supported five methods for controlling output to the document: clear(), close(), open(), write(), and writeln(). Throughout the book we have used the document.write() method to output strings to the document. Yet we really haven’t used the others at all. Let’s take a look at their features to understand why.

First, let’s address the difference between document.write(string) and document.writeln (string). Both methods take strings and output the passed string to the active document. The main difference is that the writeln() method adds a newline character (\n) to its output while the write() method does not. However, under (X)HTML, return or newline characters are ignored except within certain situations like the <<pre>> tag, within a <<textarea>>, or when a CSS white-space property is applied so you may never notice the difference. The following code snippet uses a <<pre>> tag to show the difference between the methods:

<<pre>>
<<script type="text/javascript">>

document.write("This is a write notice it doesn't cause a return even in a 
pre element");
document.writeln("This line will have a line break");
document.writeln("like so.");
document.write("You can always manually use a &lt;br&gt; element to output
 <<br>>breaks to HTML");
<</script>>

<</pre>>

The result is shown here:

Using document.write() and writeln(), we have gotten used to writing out (X)HTML to documents. As we have seen, it can be somewhat time consuming to output numerous strings, so it is often better to build a string up and then output it at once like so:

<<script type="text/javascript">>
var str = "";
str += "This is a very long string.";
str += "It has entities like &copy; as well as <<b>>XHTML<</b>> tags.";
str += "We can even include <<pre>> various special characters like";
str += "\t \t tabs or even newlines \n \n in our string<</pre>>";
str += "but remember the rules of XHTML may override \t\t\n our efforts";
document.write(str);
<</script>>

It should seem obvious what clear(), open(), and close() do. By their names, you would expect clear() to clear out the contents of a document and open() and close() to respectively open and close a document for writing. The reality is that document.clear() is not supported in modern JavaScript browsers, and in fact the document is effectively closed for writing using document.write() once displayed. Thus, explicitly opening and closing the document doesn’t really do much. However, you might find one use for them when creating content for a document in a new window, as demonstrated by the following simple example.

<<script type="text/javascript">>
var mywindow = window.open("","newwin", "height=300,width=300");
mywindow.document.open();
mywindow.document.write("<<html>><<head>><<title>>Test<</title>><</head>>");
mywindow.document.write("<<body>><<h1>>Hello!<</h1>><</body>><</html>>");
mywindow.document.close();
<</script>>

Of course you might notice that the document.open() and close() really don’t seem to be required in the example at all! Hopefully, with the rise of a standardized DOM such weird JavaScript peculiarities will fade away as everything becomes changeable.