Introduction
One of my favorite uses of JavaScript, and I guess more
specifically, DHTML, is to change content on the fly. Using just a few lines of
scripting, I can do away with the slow downloading Java and Flash, and change
text even after the page has loaded. I write this tutorial based on the assumption that you have at
least some working knowledge of JavaScript.
Changing text requires 3 different techniques, depending on the browser. If you're
like me, you favor Internet Explorer 5, but the point is that there are always
people using other browsers, so we must address them all.
Details
Let me first introduce a simple text which I will base my explanations on
changing text using:
<div ID="testing">MSNBC.com</div>
In Internet Explorer 4 or above, the script to change the above text is:
document.all.testing.innerHTML = "A very cool site!"
I access the text's ID, which tells the script which text I wish to change.
Then I use the property innerHTML, which allows me to change this text to
another.
In Netscape 6, the idea to alter a text is very similar, except in the
precise syntax:
document.getElementById("testing").innerHTML = "A very cool site!"
Interesting to note is that Internet Explorer 5 also supports this method of
changing text. If you don't care about IE4, this one line is sufficient to cover
both IE5 and NS6.
Finally, we have the dreaded Netscape 4, which surprising is still more
popular than NS6. To change text in this browser, I must actually embed the text
using a different set of tags (from the DIV). The tags required is:
<ilayer name="testing"><layer name="testing2">MSNBC.com</layer></ilayer>
Once the proper tags are setup, I can change its text in Netscape 4 using:
document.testing.document.test2.document.write("A very cool site!")
document.testing.document.test2.document.close()
Awk! Yes, it's quite messy, but that's the only route to NS4's heart!
Conclusion
Many interesting and useful applications can be created by dynamically
altering text. I can create a message scroller that changes messages every few
seconds, a text that changes when I move my mouse over it, or even an image
slide show with a corresponding description beneath it.
If you're looking for working examples of changing text on the fly, a good
place to start is Dynamic Drive. Well, that's it for now. Visit my site
if you have any suggestions for new tutorials I can contribute.
