It is conventional wisdom that information entered on a Web page is "hard coded" in place. When text content appears between paragraph tags, for instance, it is considered to be permanently fixed on the page, changeable only by editing the Web document and replacing the text with different content. Through DHTML scripting, however, this content can, in fact, be changed dynamically in response to user events.

<script type="text/javascript">

function ChangeMe()
{
  document.getElementById("PAR").innerText =
    "This is the same paragraph with different content. The previous " +
    "text is replaced with text that has been inserted by a script.";
}

</script>

<p id="PAR" style="cursor:hand; font-size:14pt" onclick="ChangeMe()">
  Here is a text paragraph that is coded inside paragraph tags.
  Click on this paragraph to change its contents.
</p>

The original paragraph includes an onclick="ChangeMe()" event handler to call the function in response to a mouse click. The script assigns a new text string to the innerText property of the paragraph.

Content Properties

All XHTML containers--paragraphs, spans, divisions, and the like—have innerText and innerHTML properties representing the content that appears inside their tags. These properties can be changed through scripting.

The innerText property of a container is the text content appearing between the opening and closing tags. As in the above example, existing content of the container is replaced by assigning a text string to its innerText property.

In addition to its text content, a container can be assigned XHTML tags. When assignment is to the innerHTML property, both the text and any embedded XHTML tags replace the previous content. The XHTML is rendered rather than being considered part of the text string. In the following example both text and XHTML content are assigned to a paragraph.

<script type="text/javascript">

function ChangeMe()
{
  document.getElementById("PAR").innerHTML =
    "This is different text content <span style='color:red'>" +
    "with embedded XHTML</span> in order to change its appearance."
}

</script>

<p id="PAR" style="cursor:hand; font-size:14pt" onclick="ChangeMe()">
  This is a paragraph that has its content replaced with new text and
  accompanying XHTML when clicked.
</p>

Of course, containers do not have to contain text for replacement. They can be coded as empty containers, as receptacles for script-generated text or messages. A click on the following button, for example, generates a response message inside an empty <span> tag.

<script type="text/javascript">

function DisplayMSG()
{
  document.getElementById("MSG").innerHTML = 
    "<span style='font-size:14pt'>Thanks for clicking me.</span>"
}

</script>

<input type="button" value="Click Me" onclick="DisplayMSG()"/>
<span id="MSG"></span>

Recall that a floating frame is produced with an <iframe> tag which include a src attribute specifying the URL of a Web page to display inside the frame. As with other container elements, a frame can be scripted to change its content. In this case, the src property is assigned a different URL. For example, a click on the following link changes the content of the accompanying iframe.

Change iframe Content

<iframe id="Frame" src="Content1.htm" style="width:250px; height:125px">
</iframe>

<a href="javascript:" 
onclick="document.getElementById('Frame').src='Content2.htm'">
  Change iframe Content
</a>

There are numerous ways to create or revise Web page content after the page has been loaded into a browser. In fact, an entire page can be created dynamically, through script, after it has been loaded. In these ways, it is possible to personalize content to the characteristics or preferences of the user.