IE Lost My Node Contents

I ran into the most bizarre JavaScript bug that plagues all versions of IE.

I get a reference to a node, set the parent’s innerHTML then try to manipulate the node. The node should have all it’s properties and child objects and does in standards-compliant browsers.

However, in IE, the node retains its attributes but has no children. That’s right, #getElementsByTagName() returns an empty HTMLNodeList. #children? Empty HTMLNodeList. The weirdest thing is that #firstChild still exists, but it is an object with no properties whatsoever.

Minimal Example:

<div id="outer">
  <p id="inner"><span>old innerHTML</span></p>

<script type="text/javascript">
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.innerHTML = 'new innerHTML';
alert(inner && inner.innerHTML ? 
  'The inner node still has innerHTML: ' + inner.innerHTML : 
  'The inner node\'s guts are gone, '
    + 'but .tagName = ' + inner.tagName

Try it yourself


Did I mention IE is the bane of my existence?