Changing content on the fly using JavaScript

Submitted on: 1/2/2015 3:05:00 PM
By: David Gardner (from psc cd)  
Level: Intermediate
User Rating: By 4 Users
Views: 3961
     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.


Changing content on the fly using DHTML

Changing content on the fly using JavaScript/DHTML

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">Planet Source Code</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">Planet Soure Code</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. Email me if you have any suggestions for new tutorials I can contribute.

Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Intermediate category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)

Other User Comments

 There are no comments on this submission.

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)

To post feedback, first please login.