I've been working on some client side AJAX code in a photoalbum application and I ran into a horrible situation today with IE. This innocuous code which is part of my library code (which in this case pops up an opaque overlay ontop of the page generically to render another window with an image ontop) would cause IE to rev up to 100% CPU utilization:

   <script type="text/javascript">
   function TestClick(button)
   {
         // _wwUtils.showOpaqueOverlay(.55,1);
         
         var sx = document.createElement("div");
         sx.id="wwShadowOverlay";
         sx.style.background="black";
         document.body.appendChild(sx);
   }
   </script>

The code that performs this tasks (showOpaqueOverlay()) is fairly complex and I was working on that block when I ran into this issue and it first I suspected various event hookups (for resizing) that were causing the issue since that's what I had been working on. But it turns out that they dynamic creation of the element and attaching it to the document (which also changed) was the culprit and results in locking up one of my dual core processors...

The code works fine on FireFox and Opera, but IE consistently was going 100% when testing it in my fairly complex HTML document. Finally I broke out the code and dumped into a separate file to test and sure enough the problem went away - both the simplified and more complex scenario stopped failing.

As it turned out IE was choking on a missing </div> tag inside of some generated code. After carefully reviewing the page I found the problem and after fixing IE stopped acting up like this.

This is one of those scary things that can bite you in the middle of a nice client coding session. Everything's fine and all of a sudden wham one of the browsers blows you out of the water like this. I wasted well over an hour tracking this down.

Specialty case for sure but it's good to know that invalid documents in some situations can cause problems for createElement/appendChild.