Re-Write a Layer's Content with JavaScript

One of the most common tasks Web developers face every day is to change the content of a Web page, without additional requests to the Web server. The easiest way to accomplish this assignment is through the use of layers.

Here, I'll show you how to re-write a layer's content with a simple function that can be re-used over and over in your Javascript code. This function works in both major browsers - Netscape 4.*/6/7 and IE 4/5/6. Consider this code fragment:

<DIV ID="MyLayer" style="position:absolute;top:10px;
left:10px;">Initial layer text</DIV>

<script language="Javascript">
function WriteLayer(ID,parentID,sText) {
 if (document.layers) {
   var oLayer;
   if(parentID){
     oLayer = eval('document.' + parentID + '.document.' + ID + '.document');
   }else{
     oLayer = document.layers[ID].document;
   }
   oLayer.open();
   oLayer.write(sText);
   oLayer.close();
 }
 else if (parseInt(navigator.appVersion)>=5&&navigator.
appName=="Netscape") {
   document.getElementById(ID).innerHTML = sText;
 }
 else if (document.all) document.all[ID].innerHTML = sText
}
</script>

<form>
<br><br>
<input type="button" value="Display Time" onclick="WriteLayer
('MyLayer',null,Date())">
</form>

Let's take a closer look at the WriteLayer() function first. The function takes 3 parameters: ID, parentID and sText. ID is the ID of our div tag -- in our case, "MyLayer". The second parameter, parentID, is needed because of the way Netscape 4.* DOM works with nested layers. These are simply "layers within layers". An example of nested layers is:

<DIV ID=
"ParentLayer"><div ID= "ChildLayer"></DIV></DIV>

You don't have direct access to a nested layer in Netscape 4.*. The only way to access it is through its parent layer:

var oChildLayer = document.ParentLayer.document.ChildLayer.document;

When we call WriteLayer() function, the parentID parameter should be null if the layer that we want to re-write is not nested in the other layer. If the layer is nested, the parentID should be the same as the parent layer ID.

The third parameter, sText, is simply the new layer content.

Our WriteLayer() function uses browser-specific code to handle the layer re-writing. If the browser is Netscape 4.* then the following code is executed:

var oLayer;
if(parentID){
 oLayer = eval('document.' + parentID + '.document.' + ID + '.document');
}else{
 oLayer = document.layers[ID].document;
}
oLayer.open();
oLayer.write(sText);
oLayer.close();

In the first step we declare the oLayer variable that will contain a reference to our layer. In the next step we check if the value of the parentID is null. If it isn't, the following line is executed:

oLayer = eval('document.' + parentID + '.document.' + ID + '.document');

For those of you who aren't familiar with the JavaScript eval() function, I'll explain this line in a little more detail.

The argument of the eval() function must be a string that can be executed as a valid JavaScript statement. If the string represents an expression, eval() evaluates the expression. If the argument represents one or more JavaScript statements, eval() performs the statements. If we call our WriteText() function with the following parameters:

WriteLayer("ChildLayer","ParentLayer","Some text...")

then the expression will be evaluated to:

oLayer = document.ParentLayer.document.ChildLayer.document;

If the parentID parameter is null then the layer can be accessed directly:

oLayer = document.layers[ID].document;

After we've gained a reference to our layer, we simply open the layer's document object, write the sText value in it, and close the document.

oLayer.open();

oLayer.write(sText);

oLayer.close();

Re-writing a layer content in Netscape 6/7 is much easier. All we need is to assign the sText value to the innerHTML property of our layer, which is accessed with getElementById method:

document.getElementById(ID).innerHTML = sText;

Re-writing a layer content in IE is easy too, because the only thing that we need to do is assign the sText value to the innerHTML property of our layer, which is accessed through the all collection:

document.all[ID].innerHTML = sText;

You can use WriteLayer() function to write any valid HTML code into the layer.

To see our WriteLayer() function in action click here