Sep 02 2006
Changing Text Using innerHTML
A lot of people have sent kind comments about the post regarding the technique to expand and collapse blocks of HTML. McKack asked how to change text or an image source from within [div] tag. Since the original post helped so many, I thought I’d post a solution to the first part of McKack’s inquiry. I’ll provide a snippet for the second part in a separate post.
There are dozens of ways to dynamically change the text on a web page using JavaScript. One way is to hide and show the contents of tags, as described in that first post. Another way is to use the innerHTML property:
This example simply takes the contents of a form field and shoves it inside an HTML element, in this case a [div] block. It’s really that simple. Note that you can use innerHTML to set the contents of an element to anything that makes sense. That is, the content does not necessarily have be just text, it can be HTML elements, too.