JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
This is the first cell
This is the second cell.
outerHTML
outerText
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
The page generated by Listing 15-13 (IE4+/Windows only) contains an H1 element
label and a paragraph of text. The purpose is to demonstrate how the outerHTML
and outerText properties differ in their intent. Two text boxes contain the same
combination of text and HTML tags that replaces the element that creates the
paragraph’s label.
If you apply the default content of the first text box to the outerHTML property
of the label1 object, the H1 element is replaced by a SPAN element whose CLASS
attribute acquires a different style sheet rule defined earlier in the document.
Notice that the ID of the new SPAN element is the same as the original H1 element.
This allows the script attached to the second button to address the object. But this
second script replaces the element with the raw text (including tags). The element
is now gone, and any attempt to change the outerHTML or outerText properties of
the label1 object causes an error because there is no longer a label1 object in
the document.
Use this laboratory to experiment with some other content in both text boxes.
Listing 15-13: Using outerHTML and outerText Properties
outerHTML and outerText Properties
Continued
35
elementObject.outerHTML