[job0107]

Try this code in FireFox.
You will find that the <span> elements can't be found by the Javascript code.
But it will work in IE.

Code:

<script>
function toggle( idname )
{
  var tag = document.getElementById( idname );
  var spans = tag.getElementsByTagName("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = spans[i].style.display=='none' ? 'inline' : 'none'; }
}
</script>

<code id="x">
<table>
 <tr>
  <td><a href="javascript:toggle('x')">toggle</a></td><td width="40px"><span><code>test1</code></span></td><td width="25px"><code> --- </code></td><td width="40px"><span><code>test2</code></span></td>
 </tr>
</table>
</code>

But when I use a <div> element the <span> elements are found easily by both browsers.

Code:

<script>
function toggle( idname )
{
  var tag = document.getElementById( idname );
  var spans = tag.getElementsByTagName("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = spans[i].style.display=='none' ? 'inline' : 'none'; }
}
</script>

<div id="x">
<table>
 <tr>
  <td><a href="javascript:toggle('x')">toggle</a></td><td width="40px"><span><code>test1</code></span></td><td width="25px"><code> --- </code></td><td width="40px"><span><code>test2</code></span></td>
 </tr>
</table>
</div>

And no, I don't know why the <code> element acts that way. I just know it does.
I would assume it has something to do with the Javascript interpreter that is being used for each browser.
Not all Javascript interpreters are the same from browser to browser.

It could also be that the <code> element is a lower order element like the <b>, <i> and <u> elements.
While the <div> element is a higher order element.

I guess it's kinda like putting a <div> element inside a <span> element.
Though it will probably work in some browsers, it is pragmatically incorrect.