The innerHTML , innerText , outerHTML , and outerText Properties

One of the most precise ways to rewrite a web page is with the innerHTML , innerText , outerHTML , and outerText properties. (See "The innerHTML , innerText , outerHTML , and outerText Properties" in Chapter 5, "Using Core HTML Properties.") Here's what those properties do. Note that innerHTML is the only one supported by Netscape Navigator so far:

innerHTML changes contents of element between start and end tags, which may include HTML.
innerText enables you change the text between the start and end tags of an element.
outerHTML changes contents of an element, including start and end tags, treats text as HTML.
outerText enables you to change all the element's text, including the start and end tags.

The innerHTML property (available in NS6+ and IE4+) has been our constant companion throughout the book. We've used it to display the results of a script in a <DIV> or <SPAN> element, but it's important to mention it in our Dynamic HTML chapters. Here's an example that shows how to use the onchange event in a text field:

(Listing 16-05.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the onchange Event</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function displayText()   {   document.getElementById("div1").innerHTML =   "The text field holds: " + document.form1.text1.value   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the onchange Event</H1>          <FORM NAME="form1">  <INPUT TYPE="TEXT" NAME="text1" ONCHANGE="displayText()">  <BR>              <DIV ID="div1">          </FORM>      </BODY>  </HTML>

Here's an example using the outerHTML property in the Internet Explorer, which enables you to rewrite the HTML for an element entirely. In this case, I'm changing an <H1> header to a scrolling <MARQUEE> element when the user clicks that header:

(Listing 16-06.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using the outerHTML Property          </TITLE>          <SCRIPT LANGUAGE = "JavaScript">              <!--  function rewriteHeader()   {   h1.outerHTML =   "<MARQUEE BGCOLOR='cyan' STYLE='font-size:54;text-decoration:  underline'>" +   "Here's the new marquee!</MARQUEE>"   span1.innerText = "You changed the header."   }  //-->          </SCRIPT>      </HEAD>      <BODY>  <H1 ID="h1" ONCLICK="rewriteHeader()">Using the outerHTML Property</H1>   <SPAN ID="span1">Click the header to change it to a marquee</SPAN>  </BODY>  </HTML>

You can see the results in Figure 16.4.

Figure 16.4. Using the `outerHTML` property.

graphics/16fig04.gif

The innerHTML , innerText , outerHTML , and outerText Properties