Create an html5 page.
Make sure you have the script from remysharp.com/2009/01/07/html5-enabling-script/ added so that IE will notice the tags.
Create an hardcoded <section id='anything'></section>
tag.
Using jQuery 1.3.2, append another section tag: $('#anything').append('<section id="whatever"></section>');
So far, everything works in all the browsers.
Repeat the previous step. $('#whatever').append('<section id="fail"></section>');
This is where IE6/7 fails. Firefox/Safari will continue working.
It could be that IE6/7 can't handle the HTML5 section tag. I say this because when I change step 4 from <section>
to <div>
, IE6/7 will start working.
If I use document.createElement()
and create my new element, it works, but it seems like jQuery's append()
has a problem with html5 elements.
The bug is in IE's implementation of innerHTML - for some reason it doesn't like the "unknown" elements being inserted via innerHTML - whereas DOM scripting is fine.
jQuery uses creates a holding div, and then drops in the markup you want to append in via innerHTML. IE now sees the unknown elements as two new broken elements, i.e. <article>content</article>
is seen as ARTICLE
, #text
, /ARTICLE
, caused by innerHTML borking.
Here's an example, check it out in IE and you'll see that innerHTML insertion method incorrectly reports 3 nodes inserted in the div: http://jsbin.com/olizu
Screenshot for those without IE: http://leftlogic.litmusapp.com/pub/2c3ea3e
I ran into this issue, too. The solution seems to be to use innerHTML on an element that's already attached to the document, then extract the created nodes. I created this li'l function to do that:
http://jdbartlett.github.com/innershiv/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With