IE Lost My Node Contents

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.

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?