IE and innerHTML stupidity

August 7th, 2007

In today's Ajaxy web, web developers find themselves dynamically displaying content more than ever. One issue that may bite you is the IE 6 implementation of innerHTML. For example: 
1
2
3
4
5
6
7
8
9
10



new Ajax.Request(url, { 
                      method: 'post',
          onComplete: function(request)
          {   
              $('mydiv').update(request.responseText);
                                            // .... do more stuff, etc
          }
         });
In IE 6 you may find that the code is throwing an error on the update call (which in IE uses innerHTML). The problem is that the html returned by the Ajax call is not technically valid. It may contain <style> or <script> tags for example, or perhaps the target element is does not allow inner blocks (<p> for example). The worst part about it is that the error does not contain any sort of helpful error message to help you out. Also, the same code will likely work fine in other browsers such as Safari or Firefox. So if you happen to run into problems updating an element in IE, take a close look at the content that you're trying to insert. IE 6 is very stringent about what it allows.
Posted by Wesley Filed in

Sorry, comments are closed for this article.