The innerHTML Property

The innerHTML element property provides a convenient way to replace the contents of elements in IE. However, it is not part of the W3C DOM. Nevertheless, in response to customer requests, Mozilla- and Gecko-based browsers (such as Netscape 6) decided to support it in builds dated May 19, 2000 or later (Mozilla M16 and later, Netscape 6 PR2 and later). Let's look at the following code sample:

<DIV ID="counter">Number of clicks = 0</DIV>
<FORM>
<INPUT TYPE="button" VALUE="Increment Counter"
  onclick="updateMessage()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
var hits = 0;

function updateMessage() {
  hits += 1;
  document.getElementById("counter").innerHTML =
  "Number of clicks = " + hits;
}

// -->
</SCRIPT>

which looks like this on the Web:

The function updateMessage() is called every time the user clicks the button. The number of hits is incremented by one, and the content of the DIV counter is updated by the innerHTML property, via a simple assignment. Notice the usage of getElementById() which is common to both Netscape 6 and Internet Explorer.

Next: A Final Word