Dynamic Content in Internet Explorer 4: The New Properties

Dynamic Content in IE4:
the new properties for replacing and deleting text and HTML

With Apologies to Charlie

To best demonstrate the use of the new properties, we will use this piece of HTML:

<BLOCKQUOTE ID="quote">
It was the <B ID="goodTimes"><I>best</I></B> of times, it was the
<B ID="badTimes">worst</B> of times, it was the age of wisdom,
it was the age of foolishness...</BLOCKQUOTE>

which, when parsed, renders:

It was the best of times, it was the worst of times, it was the age of wisdon, it was the age of foolishness...

The second named element in the above passage is goodTimes, assigned to a B tag.

This element can be referenced as:

document.all.goodTimes

As we know, the all collection of the document object contains all the elements in a page. For this reason, it is redundant as a reference. When dealing with cross-browser code, it is usually maintained to allow for comparison with Navigator's document object. Since this is IE-specific code, we'll do away with it. Thus, the first element can be simply referenced as goodTimes, and the four properties in question as:

goodTimes.innerText
goodTimes.outerText
goodTimes.innerHTML
goodTimes.outerHTML

These properties have the following string values:

(The example again: the <B ID="goodTimes"><I>best</I></B> of times,)

goodTimes.innerText - "best" (text within element)
goodTimes.outerText - "best" (text including element tags)
goodTimes.innerHTML - "<I>best</I>" (HTML within element)
goodTimes.outerHTML - "<B ID="goodTimes"><I>best</I></B>"
                               (HTML including element tags)

The values of these properties can be both retrieved and set. That is, they are read/write properties.

Notice that innerText and outerText have the same value. All HTML has been stripped, as the "text" properties see only the non-HTML text..

Assigning a string value to any of these properties through a script will cause the page to be immediately updated to accomodate the changes.

Note:

• assigning an empty string to an "inner" property deletes the content of the element.
• assigning an empty string to an "outer" property deletes the element itself, forever. It can no longer be referenced.
• HTML code assigned to the innerText or outerText properties is taken literally and rendered as text. No parsing is done. See the example on the next page.

We now know how these properties obtain their initial values. We can, however, change these values at will

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97

URL: https://www.webreference.com/dhtml/column5/inANDout.html