Firefox makes DOM standard compliant on change

Firefox seems to take some liberties with the DOM: it inserts and closes
elements to make the structure (more) standard compliant, but only if something
is changed. As this does not seem to be done by any other major browser,
debugging problems caused by this can be tricky.

To take an example, the following code has block-level elements inside an inline
element:

<html>
<head>
</head>
<body>
<a href="#link">
<div id="container">text1</div>
<div>text2</div>
</a>
<script type="text/javascript">
document.getElementById('container').innerHTML='new text';
</script>
</body>
</html>

When the JavaScript runs, apart from modifying the content of the first DIV,
Firefox also inserts a new A element around the content:

<body>
<a href="#link">
<div id="container"><a>new text</a></div>
<div>text2</div>
</a>
<script type="text/javascript">
document.getElementById('container').innerHTML='new text';
</script>
</body>

Its behaviour is inconsistent: in structures similar to the above, it may also close
the outer A element before the opening DIV tag (and re-open it after the second
closing DIV tag again), making the whole structure wholly standard compliant.

Naturally, the easiest way to avoid this is to create standard-compliant code.
But it may be useful to be aware of this feature of Firefox, just in case.

Popular Posts