Dynamic Content in Internet Explorer 4: Changing Property Values

Dynamic Content in IE4:changing the values of the new properties

<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, ... </BLOCKQUOTE>

Saving Parts of the Page HTML

When the page you are reading was loading, in fact, just before the
</BODY> tag, it encountered this script snippet:

saveQuote = quote.innerHTML;

Here, we assigned the value of quote.innerHTML to a variable so we
can use it later. saveQuote now contains all the HTML enclosed by the
BLOCKQUOTE start and end tags.

Assigning New Values (a live example)

In our SCRIPT we have defined five functions. Four of them assign string
literals to properties when called, and the fifth restores the original
look of the quote by assigning the value of saveQuote back to the
element it was originally read from.

The example for IE4 Users

For IE4 WIN95 users, here's the code in action. Press the buttons to
see the results live. Reset before repeating a feature. Remember two of
the functions delete the element reference. A second attempt to access
that element will generate an error. If you experiment and an error is
generated, you will be asked by Explorer whether you want to contiunue
using scripts on this page. CLICK YES!. Then RESET. No problem. If you
click NO the script routines are lost.

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

The example for the Rest of Us

For those of you without IE, here is a table with the results of each click:

Button/Function

The resulting HTML is...

and the on-screen display is...

.innerText

...it was the <B ID="goodTimes">&lt;I&gt;grooviest&lt;/I&gt;</B> of times...

...it was the <I>grooviest</I> of times...

.outerText

...it was the of times...

...it was the of times

.innerHTML

...it was the <B ID="goodTimes"><BIG>greatest<BIG></B> of times...

...it was the greatest of times...

.outerHTML

...it was the <FONT COLOR='blue'>most horrible</FONT> of times...

...it was the most horrible of times...

Although we have used simple text-insertion HTML for our examples,
the exact same techniques can be used to replace images, applets
and controls. Any valid HTML can be inserted, regardless of length or
content.