Dynamic Content in Internet Explorer 4: Changing Property Values

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

Let's look at our quote again:

<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.

function inText() {
    goodTimes.innerText = "<I>grooviest</I>";
}
function outText() {
    badTimes.outerText = "";
}
function inHTML() {
    goodTimes.innerHTML = "<BIG>greatest</BIG>"
}
function outHTML() {
    badTimes.outerHTML = "<FONT COLOR='blue'>most horrible</FONT>"
}
function doOver() {
	quote.innerHTML = saveQuote;
}

These functions are activated by clicking on buttons defined in the BODY:

<BUTTON onClick="inText()">.innerText</BUTTON>
<BUTTON onClick="outText()">.outerText</BUTTON>
<BUTTON onClick="inHTML()">.innerHTML</BUTTON>
<BUTTON onClick="outHTML()">.outerHTML</BUTTON><BR><BR>
<BUTTON onClick="doOver()"><B>RESET</B></BUTTON>

Note the new <BUTTON> tag and its use. Simple and effective.

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"><I> grooviest</I></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.

This same rule applies to the new methods, as well.

Produced by Peter Belesis and

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