appendChild doesn't work correctly in IE

Question

I am trying to create a simple Modal window, but IE isn't cooperating. When I call this function in IE, the content appears at the bottom of the page under all content and the overlay image does not appear. Here's the code:

function applyOverlay(src)
{
  var my_overlay = document.createElement('div');

  my_overlay.setAttribute('id','myoverlay');
  var doc_height = document.body.scrollHeight;
  my_overlay.setAttribute('style','text-align:center; position:fixed; top:0px; left:0px; background-image:url("images/trbg.png"); width:100%; height:'+doc_height+'; z-index:999;');
  my_overlay.innerHTML="<iframe style='background:none;' frameborder=0 height='100%' width='80%' src='"+src+"'><iframe>";
  document.body.appendChild(my_overlay);
}

Answer 1

This is common IE issue. It is irritating, but managable.

If document.body.appendChild is executed within the body tag before the body is closed, IE6 will simply not load the page. 7 and 8 will wait until the page is loaded

So, how to approach this issue?

• wait until the body is loaded, using body.onload.
• append the element to another element instead of the body tag.

I recommend the second option. Appending elements to another target element will preserve the intended behavior and not change the way you add your elements to the site.