IE’s innerHTML problem
How do you remove content from an element that’s already been added? The fastest way is to use
innerHTML and set it to an empty string. Boom! The content is now gone. This is much faster than going through and removing each child using
removeChild(). But there’s a problem with this approach in Internet Explorer. Try doing the following:
- Create an empty
<div/>element with a background color.
- Insert some content dynamically (text, elements, whatever you’d like).
- Remove the content using
What I expect to happen is for the
<div/> to become invisible (technically, 0 pixels in height) because there is no content holding it open and a
<div/> element has no height specified by default. In IE, the content is removed but the height of the
<div/> does not go to 0; Firefox and Opera behave as I expected (sorry, don’t have Safari handy to test at the moment).
I remember a time when I used to have to code around bugs in Netscape Navigator, funny how things have been reversed now.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.