Wednesday, February 10, 2010

jQuery, innerHTML and IE8 follow up

I thought I'd better do a test script to follow up on my earlier post about Silverlight, jQuery and IE8.

And it looks like IE8 definitely has a problem when it comes to dynamically generated block objects and innerHTML, unless I've got a problem in the script that Firefox seems to handle without complaint.

Anyway, here's the script I put together.
<html>
<head>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
</head>
<body>
<p>Using plain old JA to insert an inline object into a dynamically generated block object, via innerHTML</p>
<p><img id="plain" src="video.jpg"></img></p>
<p>Using plain old JA to insert an inline object into a dynamically generated block object, via jQuery</p>
<p><img id="flat" src="video.jpg"></img></p>
 
<script type="text/javascript">
 
//doing it the manual way via jQuery
$(document).ready(function() {
 var collection = jQuery("img#flat");
 if (collection){
  var i = 0;
  collection.each(function() {
   i++;
   var id = "flat" + i;
         var newDiv = 
          "<div id=" + id + " >" +
           "If you're reading this, it did not work." +
          "</div>";
          
         $(this).parent().html(newDiv);
         $('div#'+id).html('<p>It worked! The id is ' + id + ' but different.</p>');
  });
 }
});
 
// doing it the manual way via innerHTML
$(document).ready(function() {
 var collection = jQuery("img#plain");
 if (collection){
  var i = 0;
  collection.each(function() {
   i++;
   var id = "plain" + i;
         var newDiv = 
          "<div id=" + id + " >" +
           "If you're reading this, it did not work." +
          "</div>";
          
         $(this).parent().html(newDiv);
         document.getElementById(id).innerHTML = '<p>It worked! The id is ' + id + '.</p>';
  });
 }
});
 
</script>
</body>
</html>


I would seem that if jQuery can manage to change some innerHTML without running into problems in IE8, then perhaps the Silverlight developers could take a leaf from their book and do the same thing.

No comments:

Post a Comment