The innerHTML , innerText , outerHTML , and outerText Properties

The innerHTML , innerText , outerHTML , and outerText properties are the basis of much Dynamic HTML, because they enable you to access an HTML element's HTML and text, and change them at runtime. We'll put these properties to work in Chapter 16. Here's an overview of these properties:

innerHTML . Changes contents of element between start and end tags, can include HTML.
innerText . Enables you to change the text between the start and end tags of an element.
outerHTML . 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.

You can see the support for these properties in Table 5.27 (note that only innerHTML is supported by the Netscape Navigator, and only in version 6 so far).

Table 5.27. The innerHTML , innerText , outerHTML , and outerText Properties

Property	NS2	NS6	IE4	IE5	IE5.5	IE6
`innerHTML`		x	x	x	x	x
	Read/Write
	Type: String
`innerText`			x	x	x	x
	Read/Write
	Type: String
`outerHTML`			x	x	x	x
	Read/Write
	Type: String
`outerText`			x	x	x	x
	Read/Write
	Type: String

Here's an Internet Explorer example using the innerHTML property that rewrites an <H1> header when you click that header, using the innerHTML property:

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

 <HTML>      <HEAD>          <TITLE>Using the innerHTML Property</TITLE>          <SCRIPT LANGUAGE = JavaScript>              <!--             function rewriteHeader()              {  document.all.Header.innerHTML = "Here's a New Header!"  }          </SCRIPT>      </HEAD>      <BODY>          <H1 ID="Header" ONCLICK="rewriteHeader()">Click Me!</H1>      </BODY>  </HTML>

You can see the results in Figure 5.11, where I've clicked the header to rewrite it.

Figure 5.11. Using the `innerHTML` , `innerText` , `outerHTML` , and `outerText` properties.

graphics/05fig11.gif

We'll see more on these properties in Chapter 16.

The innerHTML , innerText , outerHTML , and outerText Properties