Writing to a Document | Inside JavaScript

The most popular document object methods are the write and writeln methods. These methods enable you to write text to a web page; the writeln method is the same as the write method, except that it adds a carriage return character after the text it writes . Note that carriage returns do not show up in web pagesyou need an element such as the <BR> element to skip to the next line in a web page displayed in a browser. However, the carriage return can help format the source HTML of an HTML document and make it easier to read. Here's the syntax for these methods:

 write(  text  )  writeln(  text  )

In this case, text is the text to write to the web page.

Note that although these methods enable you to write to web pages, the innerHTML , innerText , outerHTML , and outerText properties we saw in Chapter 5 and will see in more depth in Chapter 16 give you much more precision. That is, it's hard to control just when the browser will write to the web page when you use the write methods, because the browser writes to the web page as soon as it encounters a write statement (if the body of the web page is available and loaded).

When you're loading a web page, for example, the document is opened, and elements are displayed as they're encountered . When the browser encounters a write statementand the document is openthe browser writes the text in that statement to the web page at once, embedding that text in the web page wherever the browser happens to be writing. Take a look at this code, for example, which asks the user whether he wants a graphics- intensive page, and loads a big or a small image accordingly :

 <HTML>      <HEAD>          <TITLE>              Self-modifying Web Pages          </TITLE>      </HEAD>      <BODY>          <H1>Self-modifying Web Pages</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--  if(confirm("Do you want a graphics intensive page?")) {   document.write("<BR><IMG WIDTH='2048' HEIGHT='2048' " +   "SRC='gif/bigimage.jpg'></IMG>")   }   else {   document.write("<BR><IMG WIDTH='100' HEIGHT='100' " +   "SRC='gif/smallimage.jpg'></IMG>")   }  // -->          </SCRIPT>      </BODY>  </HTML>

Here, the browser opens the document, writes the <H1> header, and then encounters our write statement, so that the image will be embedded in the document after the <H1> header in this case. After the document is complete, the browser closes it.

Because the browser writes to the web page when it encounters the write statement during the loading process, it's sometimes a little tricky to get things just right. If we wanted text to follow the image in this web page, for example, the best option would have been to write the text from the <SCRIPT> element instead of embedding it directly into the web page's HTML, because here, the HTML in the page is loaded before the script is run.

When you want to entirely write or rewrite a web page, you have more control, because you control the entire writing process. When you're writing or rewriting a page from scratch, you can use the document. open method to open a document (and clear it if it already existed), and then write to the document with document.write , and close it with document.close . In fact, if a document is closed and you use document.write on it, the document is opened automatically (although this wasn't true in the Netscape Navigator before version 4.0you had to use document.open explicitly if a document had been closed)you don't need to use document.open . Here's an example that entirely rewrites a page that has already been loaded (and therefore was already closed) when the user clicks a button:

(Listing 09-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Reopening and Rewriting a Web Page          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function rewrite()   {   document.write("You clicked the button!")   document.close()   }  // -->          </SCRIPT>      </HEAD>       <BODY>          <H1>Reopening and Rewriting a Web Page</H1>          <FORM>  <INPUT TYPE="BUTTON" ONCLICK="rewrite()" VALUE="Click Me!">  </FORM>      </BODY>  </HTML>

When you click the button in this example, the code in this example opens and rewrites the entire document to only display the text You clicked the button! , as you see in Figure 9.7.

Figure 9.7. Rewriting a document.

graphics/09fig07.gif

Don't forget to use document.close when you've opened a window yourself and are finished writing to it. (If the browser opened the window, it'll call document.close itself.) Here's an example from Chapter 7, "Using window and frame Properties," where we're closing a window we opened and wrote toif you don't use document.close here, the Netscape Navigator will display a wait icon that never goes away, because it considers the window still open for writing (Listing 07-02.html on the web site):

 <HTML>      <HEAD>          <TITLE>Using the closed and opener Properties</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             var window1              function openWindow()              {                  window1 = window.open("","window1", "HEIGHT=300, WIDTH=300")                  window1.document.write("<HTML><BODY><H1>A New Window</H1><BR>" +                  "<FORM><INPUT TYPE='button' VALUE='Close the original window'" +                  "ONCLICK='window.opener.close()'>" +                  "</FORM></BODY></HTML>")  window1.document.close()  }              function closeWindow()              {                  if (window1 && !window1.closed) {                      window1.close()                  }              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the closed and opener Properties</H1>          <FORM>              <INPUT TYPE="button" VALUE="Open New Window" ONCLICK="openWindow()">              <INPUT TYPE="button" VALUE="Close New Window" ONCLICK="closeWindow()">          </FORM>      </BODY>  </HTML>