IE Windows Bug - text disappears when element is removed with innerHTML

Explorer Mac loses track of the element when it's been removed. So in this browser elements don't stay in hyperspace after they've been emptied from the innerHTML.

When you remove an element by innerHTML='' it's possible to re-append the element to the document. In Explorer Windows, though, the text goes missing.

This is a complicated bug. Pay close attention.

  1. We have a <h4 id="testHeader">. We create a pointer by means of pointer = document.getElementById('testHeader');.
  2. Click on 'Move header'. This function moves the header to the test DIV by means of the pointer. No surprises here.
  3. Click on 'Empty innerHTML'. We now empty the innerHTML of the test DIV. The header disappears, obviously.
  4. Click on 'Move header' again. The header re-appears in the DIV, but in Explorer Windows its text is gone.

The text disappearance is obviously a bug; if the element is available it should also contain its child nodes.

It's also interesting to note that when you remove an element through innerHTML='', the element is not trashed but continues to exist in DOM hyperspace. It's there, but it's not attached to the document, so it's invisible.

That's why 'Move header' works the second time. The pointer still points to the element in hyperspace, and it's re-inserted into the document. Without the pointer this wouldn't work: document.getElementById('testHeader') doesn't work, because the test header is not part of the document any more.

Test

  1. Move header
  2. Empty innerHTML

The test header

The test DIV