Writing to a Document

A script can write directly to a Web page so that it appears as part of the HTML text on the page. This is accomplished using the .innerHTML DOM property.

The innerHTML Property

The innerHTML property permits assignment of both text and HTML tags to a <span> tag, plus it renders the HTML rather than treating it as text characters. Thus, you can format text output assigned to the spanned area by including styling tags around or within the string.

document.getElementById("id").innerHTML = output

Figure 3-8. General format to assign output to innerHTML property.

In the following example, a <span> tag is the target for both text and HTML written to its innerHTML property.

Figure 3-9. Writing styled output to the innerHTML property.

function WriteText() {
   var Output  = "<div style='border:ridge 3px; padding:7px; width:250px; ";
   Output += "color:darkgrey; font-size:14pt; font-weight:bold'>";
   Output += "Here is a styled text string written to the page.";
   Output += "</div>";
   document.getElementById("Text").innerHTML = Output;
}

Listing 3-5. Code to write styled output to innerHTML property.

In this example, the function concatenates and assigns text strings - including an encompassing <div tag to style the output - to variable Output. After the output is built, the variable is assigned to the innerHTML property of the output area, where the XHTML code in the string variable is applied rather than displayed as text characters.

Any time you are building an output string for assignment to the innerHTML property of a span tag, and where the final output is a concatenation of two or more shorter sub strings, you need to create the string in a variable as is illustrated above. You cannot incrementally concatenate individual substrings of text and HTML code directly to the innerHTML property of the <span> tag. You cannot, that is, use code in the format,

document.getElementById("id").innerHTML += "string 1";
document.getElementById("id").innerHTML += "string 2";
document.getElementById("id").innerHTML += "string 3";
...

HTML tags and style settings that get split across the individual concatenations are not interpreted properly and are incorrectly rendered. Always build the final output in a variable, and assign the variable to the innerHTML property of the tag as shown in the following format.

var FinalString  = "string 1";
FinalString += "string 2";
FinalString += "string 3";
...
document.getElementById("id").innerHTML = FinalString;

This approach ensures that all concatenated text and HTML tags are rendered at one time and are properly paired for display and styling.

The <span> Tag

A <span> tag is an HTML container for text. One of its primary uses is to enclose text strings to which style sheets are applied. An equally valuable use for the tag is to mark locations on a Web page where information can be written dynamically from a script.

The following button is accompanied by a <span> tag that serves as the target for script output. When the button is clicked, a function is called to write a message to the tag.

Figure 3-4. Writing to a <span> tag.

function WriteText() {
   document.getElementById("SpanArea").innerHTML = 
      "Here is a text string written to the page.";
}

Listing 3-2. Code to write to a <span> tag.

In order to define an area on the page to which information can be dynamically written, include a <span> tag at that exact location. Code the tag with both opening and closing tags and assign an id for script reference.

The <div> Tag

A <span> tag is an "inline" tag. It does not cause a line break before or after the content it surrounds. A <div> tag, in contrast, is a "block-level" tag. It encloses content and sets it off from surrounding text by line breaks. Otherwise, it serves the same function as a <span> tag, to mark content for application of styling. The <div> tag also has innerText and innerHTML properties that can be used to display script output.

In the following example, a <div> tag is hard-coded on the page with enclosed text. A click on the accompanying button replaces the text content of the division by assignment to its innerHTML property.

Figure 3-10. Writing replacement output to the innerHTML property.

function WriteDIVText() {
  document.getElementById("DIVText").innerHTML = 
    "Here is replacement text for the division.";
}

Listing 3-6. Code to replace text by assignment to innerHTML property.

The above example writes only a replacement text string. By assigning to the innerHTML property of the division, both text and HTML tags, along with script output, can be written.

Figure 3-11. Writing replacement output and HTML to the innerHTML property.

function GetLucky() {
  var TheDate = new Date();
  var LuckyNumber = Math.floor((99999 - 11111 + 1) * Math.random() + 11111);
  
  var Output  = "Your lucky number for ";
      Output += TheDate.toLocaleDateString();
      Output += " is <b>" + LuckyNumber + "</b>.";
  document.getElementById("LuckyNo").innerHTML = Output;
}

By using <span> and <div> tags you have great flexibility in displaying script output in direct response to user actions. These tags are easily integrated with other HTML coding on the page and produce output that fits right into the regular flow of page content. You probably will come to rely on these tags as your preferred script output methods.

TOP | NEXT: Textbox Fields