jQuery .html() not displaying any data in ie7, but ie8 works

Question

So who doesn't have issues with ie7 ?

It seems that I cannot get ie7 to recognize some data.

I have created a wordpress theme for a client of mine, and this allows them to put in extra information in the wordpress meta fields through the admin so they can display extra info.

I have written a small jQuery script that looks at an images alt and title to gather this info and write it into a div.

Below is my script.

<script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function(){
      var title = jQuery('.attachment-post-thumbnail').attr('title');
      var alt = jQuery('.attachment-post-thumbnail').attr('alt');
      jQuery('#vehicle-alt').html('<h2 class="car-detail">'+title+'</h2><p>'+alt+'</p>');
    });
    //]]>
</script>

When i look at the source code in ie7, there is no information that has been passed.

the div is as simple as <div id="vehicle-alt"></div>

Answer 1

.html() method uses the browser's innerHTML property.Some browsers may not generate a DOM that exactly replicates the HTML source provided.

It seems that jQuery html() method calls the method empty() on an existing DOM object. Hence try empty() instead of html() on the div, and try append(). For example

 $('#vehicle-alt').append('html content');

Also please try other dom manipulation menthods provided from JQuery.

Answer 2

I had this bug too.

The solution is to validate the html content that I was trying to print or add.

I tried several jquery functions: html, append, appendTo... But nothing worked.

In my case the html had an extra close tag. I deleted it and now everything is working ok.