Changing content on the fly using JavaScript

Using JavaScript and DHTML, content on your page can be changed dynamically and on-the-fly. Learn how to in this tutorial! You're learn three different techniques, one for IE5, NS4, and NS6.

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:

<divID="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:

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Comments and Discussions

I am trying for a div which will be displayed slidingly from top to down on click event of a button. but i can not. i completed sliding div but the requirement is to delight the back area the div. please help me to solve it if there is someone who can do it.

Is there any way using your technique, so that I can catch events when a particular image is about to be displayed or after displayed can I change content of the image.
For example I want to keep my images encrypted at server, but when I am displaying under custom browser I will decrypt them?

DHTML is great; JavaScript is great; CSS is great.. only problem: compatibility.

If you use this technology on the web, a lot of users will have big problems viewing pages using this code. Of course there are workarounds for some of the problems (yet not all of them), but these make the code five times bigger, harder to work with and less functional: you can spend 10 minutes writing a cool JavaScript and an hour making it Netscape compatible.

Netscape have solved some of the compatibility problems in Navigator 6, but a lot of users are still using the previous versions, and good webpages must take this in account.

Of course, compatibility is luckily not a problem when you are dealing with web-pages displayed in applications you create where you are sure Internet Explorer is used.

The DOM specifies how to address objects like layers (DIV or SPAN elements) and their properties. Usually, you have to use a certain method to change the value of these properties. For now, Opera doesn't have a method to change to text contents of a layer.