Click here to Skip to main content
13,355,726 members (60,906 online)
Click here to Skip to main content
Add your own
alternative version


15 bookmarked
Posted 18 Aug 2001

Changing content on the fly using JavaScript

, 18 Aug 2001
Rate this:
Please Sign up or sign in to vote.
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.


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.


Let me first introduce a simple text which I will base my explanations on changing text using:

<div ID="testing"></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"></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!")

Awk! Yes, it's quite messy, but that's the only route to NS4's heart!


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.


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.

A list of licenses authors might use can be found here


About the Author

David Gardner
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Questionslididng div Pin
mnalammwb16-Mar-08 22:29
membermnalammwb16-Mar-08 22:29 
Generalrandomly changing images on refresh using javascript Pin
Anonymous9-Apr-05 9:03
sussAnonymous9-Apr-05 9:03 
QuestionHow to change image before or after display? Pin
Narendra Chandel1-Apr-04 23:34
memberNarendra Chandel1-Apr-04 23:34 
GeneralCorrect way to change layer content in Netscape 4.x Pin
emailmichael5-Jun-02 20:37
memberemailmichael5-Jun-02 20:37 
GeneralCompatibility Pin
Marc Richarme20-Aug-01 13:14
memberMarc Richarme20-Aug-01 13:14 
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.

Now, that's my expirience with DHTML. Hmmm | :|
GeneralRe: Compatibility Pin
Anonymous14-Apr-04 18:46
sussAnonymous14-Apr-04 18:46 
QuestionOpera 5.12? Pin
Victor Vogelpoel19-Aug-01 1:40
memberVictor Vogelpoel19-Aug-01 1:40 
AnswerRe: Opera 5.12? Pin
Onno26-Nov-01 7:56
memberOnno26-Nov-01 7:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 19 Aug 2001
Article Copyright 2001 by David Gardner
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid