Internet Explorer document.body.appendChild(...) problem
On my spare time, I develop a PHP web application on OS X and thus test my sites in Firefox, Safari and Opera on a daily basis. More seldom, I also verify that it works in Internet Explorer. Or doesn’t.
One issue occured after I added a popup element control to a site, which makes it possible to display a div element as a popup with a semi-transparent background that closes the popup when it’s clicked.
This control worked great in all browsers that I tested it on. However, when I eventually tested it in Internet Explorer, I found that it couldn’t handle this piece of JavaScript:
document.body.appendChild
As I tried to access the site, Internet Explorer 6 refused to load the page, and
simply alerted that The operation was aborted.
It turns out that if document.body.appendChild(...) is executed within the body
tag, before the body is closed, IE 6 will simply not load the page.
To handle this situation, you can:
- wait until the body is loaded, using
body.onload - append the element to another element, instead of the body tag
Waiting for the body to load is not an option in many cases, since it causes the logic to halt while waiting for the event. I don’t recommend it.
Instead, I use the second option. Appending elements to any other element works great and doesn’t require you to change how your page is loaded by Internet Explorer 6.