March 3, 2000 - Updating Inner HTML | WebReference

March 3, 2000 - Updating Inner HTML

Yehuda Shiran March 3, 2000
Updating Inner HTML
Tips: March 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

One of the classic incompatibilities between Internet Explorer and Netscape Navigator is the way they update DHTML elements. Internet Explorer supports the innerHTML property for several elements, including the SPAN and the DIV. Netscape Navigator, on the other hand, does not support the innerHTML property. The trick to overcome it is by writing to the document property of the DHTML element. The first problem in implementing such a write operation is that it does not work while loading the page. You have to write to the DHTML element only after the page is fully loaded. You can define an event handler, onload():

onload = start;
And start() just writes a welcome message to the phone display:

function start() {
  outputStringToDisplay(welcomeStr);
}

The other problem is that when you write to the DHTML in Netscape Navigator, you completely blank the other attributes of the DHTML, like its frame, its background color, etc. The solution we use here was to embrace a SPAN element within a DIV element:

<DIV ID="displayID" STYLE="position: absolute"> 
  <SPAN ID="foundSoFar" STYLE="position: absolute; border: 2px red solid; width: 250">
  </SPAN> 
</DIV>

In Internet Explorer, we just change the innerHTML parameter of the inner SPAN, foundSoFar. In Netscape Navigator, we refer to the outer DIV as the DHTML element, and write the SPAN element every time from scratch. Thus, we need to write the border and color specifications, for example, every time:

function outputStringToDisplay(str) {
  if (nameCode == 2) {
    with (document.displayID.document) {
      open();
      str = '<SPAN STYLE="position: absolute; border: 2px red solid; width: 235">' + str + '</SPAN>';
      write(str);
      close();
    }
  } 
  else {
    document.all.foundSoFar.innerHTML = str;
  }
}

Again, notice how Internet Explorer anchors on the inner SPAN foundSoFar element, while Netscape Navigator anchors around the outer DIV displayID element. Learn about an application that implemented the above, in Column 58, The Doc Dialer, Part 2: A Browser-Independent Version.