| home / experts / dhtml / column5 |   
|
|
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>
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.
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.
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...
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
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column5/propChange.html
