Question

There is a phantom empty tag (<>) showing up in IE’s developer tools HTML tab.

Here’s a snippet of the actual HTML source, with a few irrelevant portions removed:

<td><img src="1.jpg"></td>
<!--start mo script-->
<div id="mo">
<script type="text/javascript" src="mo.js"></script>
</div>
<script type="text/javascript">
setTimeout('timeOutMO()', 5000);
function timeOutMO() { 
   document.getElementById("mo").innerHTML = "";
}
</script>
<!--end mo script-->
<td><img src="2.jpg"></td>

In both Firefox’s Firebug and Chrome’s debugger, the nodes are shown as expected, with the <td>, <div>, <script>, and <td> nodes as siblings.

But in IE’s debugger, I get a phantom empty node that’s messing things up. It looks like this:

<td>
   <img src="1.jpg">
</td>
<!--start mo script-->
<>
   <div id="mo">
      <script type="text/javascript" src="mo.js"></script>
   </div>
   <script type="text/javascript">...</script>
   <!--end mo script-->
</>
<td>
   <img src="2.jpg">
</td>

IE is basically treating the div and script inside the empty tag not as siblings of the td tags but as nephews and nieces.

Anybody know why?

Answer 1

What you are doing violates the HTML standard. Every browser will handle strange cases like those differently. Why not wrap it in a td?