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:

[Download Snippet]

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.

One particular problem we (the developers at CRS, my employer) have been struggling with is dynamically showing or hiding a block of HTML inside of either a <div> tag or a table row. Since our application is used primarily by PC users running Internet Explorer, we had been using something like this to dynamically expand and collapse blocks:

[Download Snippet]

This works in Internet Explorer, but behaves strangely in most other browsers. I won’t get into the details of how each browser handles the code. What we want is a solution that works with all browsers. Right?

Right. I’m embarrassed that I dragged my feet for so long to fix this, writing stupid workarounds for browsers other than PC-IE. The problem in the code snippet above is not the JavaScript, but the block value used for the display property. For a block to expand and render properly, the value of the property should be set to an empty string in the JavaScript and in the HTML. Also, notice the difference in the style attribute of the div tag. The value of the display property is an empty string there as well, without quotes. Qualifying property values in inline styles is common but incorrect and will cause problems.

[Download Snippet]