Capt. Horatio T.P. Webb

DIV and SPAN
and
innerHTML

The DIV and SPAN blocks used as containers. The "contain" some HTML content but are not proccessing tags (like bold, italic, etc.) or objects (like text boxes or selects).

CONTAINER USAGE

The DIV block is a set of HTML tags that has some HTML content between the beginning and ending DIV tags -- like this:

<DIV>some content</DIV>

The DIV block does not directly modify or process the content in any way. It does, however, generate a new line before and after the content. Consider the following HTML segment:

"Now is the time for all good men <DIV>this is inside the DIV block</DIV> to come to the aid of their party."

When processed by the browser the result renders as:

"Now is the time for all good men

this is inside the DIV block

to come to the aid of their party."

Notice that the format of content inside the DIV is the same as the formet of the content outside. The unstyled DIV block just causes new lines to be inserted before and after the DIV tags.

The SPAN blocks also does not alter the content inside the SPAN tags. It behaves as an "in-line container" and DOES NOT insert new lines before and after the SPAN tags. For eample, the HTML code segement:

"Now is the time for all good men <SPAN>this is inside the SPAN block</SPAN> to come to the aid of their party."

renders as:

"Now is the time for all good men this is inside the SPAN block to come to the aid of their party."

The SPAN tags do nothing to the content. The usefulness of containers derives from the need to either: (1) control the presentation format of the block or (2) to control the content itself.

Changing the Container's Presentation Format
By using CSS, we can differentiate the content of the containers (DIV and SPAN) from the rest of the HTML page. This typically involves using either a style sheet or in-line local style attribute. Suppose we wish to separate some HTML content from the rest of the page by placing the content in a bordered box with a different background.
The HTML could be:
"text text text text text <DIV style="border:2px solid green;width:220px;background-color:#aaaaaa;">this text is inside the DIV block</DIV> text text text text text"
This would render as:
"text text text text text
this text is inside the DIV block
text text text text text"
A span block with the same properties would be:

"text text text text text <SPAN style="border:2px solid green;width:220px;background-color:#aaaaaa;">this text is inside the SPAN block</SPAN> text text text text text"
and would render as:
"text text text text text this text is inside the SPAN block text text text text text"
In similar fashion we could use any of the CSS properties to treat the block differently. We can change fonts, position, colors, margins, padding, visibility or backgrounds.
Thus DIV and SPAN provide a way to distinguish the various parts of the HTML page by using different local CSS properties. This may also apply to page styles. This HTML page has the following CSS classes defined:
```
<style type="text/css">
SPAN.type1 {font-family:Arial, Helvetica;color:green;}
DIV.type2 {font-family:Comic Sans MS;color:blue;}
</style>
```
The following raw HTML paragraph:
text text text text <span class="type1">this is SPAN block where class is = ptype1</span> while this is <DIV class="type2">a DIV block where class = type2</DIV>Text text text text
renders as:
text text text text this is SPAN block where class is = type1 while this is
a DIV block where class = type2
Text text text text
Additionally, there is the ability to control the CSS properties of containers from script code by supplying and "id" for reference. Consider the following javascript code:
```
function swap_color()
{
 if (document.all)
   {
    color_now=document.all.link1.style.color;
    if (color=="red")
      document.all.link1.style.color="blue";
    else
      document.all.link1.style.color="red";
    }
 else
   {
    color_now=document.getElementByID("link1").style.color;
    if (color=="red")
      document.getElementByID("link1").style.color="blue";
    else
      document.getElementByID("link1").style.color="red";
    }
}
```
Here is the raw HTML for a link that uses this code and changes color of the SPAN block with id="link1" when clicked:
<a href="#" onClick="swap_color(); return false;"><span id="link1">Click Me</span></a>
Click Me
Notice that the underline does not change after the second click (see the psuedoclasses section here to modify this behavior).

Changing the Container's Content

The last major use of the DIV and SPAN containers is to change the content of the HTML page from script by altering what is inside the container tags. Here is some cross-browser code for retrieving and setting the content of a SPAN block:

function swap_content()
{
 if (document.all)
   {
    content_now=document.all.block1.innerHTML;
    if (content_now=="George Washington")
      document.all.block1.innerHTML="Millard Fillmore";
    else
      document.all.block1.innerHTML="George Washington";
    }
 else
   {
    content_now=document.getElementById("block1").innerHTML;
    if (content_now=="George Washington")
      document.getElementById("block1").innerHTML="Millard Fillmore";
    else
      document.getElementById("block1").innerHTML="George Washington";
    }
}

Here is the raw HTML for the page:

<input type="button" onClick="swap_content()" value="swap presidents"> <span id="block1" style="border:2px solid green;background-color:#aaaaaa;padding:5px;">George Washington</span>

This HTML renders as:

George Washington

For a little more innerHTML fun, click here and take the quiz at the bottom of the page.