jQuery, html5, append()/appendTo() and IE

Question

How to replicate:

1. Create an html5 page.

2. Make sure you have the script from remysharp.com/2009/01/07/html5-enabling-script/ added so that IE will notice the tags.

3. Create an hardcoded <section id='anything'></section> tag.

4. Using jQuery 1.3.2, append another section tag: $('#anything').append('<section id="whatever"></section>'); So far, everything works in all the browsers.

5. Repeat the previous step. $('#whatever').append('<section id="fail"></section>'); This is where IE6/7 fails. Firefox/Safari will continue working.

Error

This is the error displayed.

Thoughts

• 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.

Answer 1

HTML5 didn't exist when IE6 and 7 were developed.

Answer 2

Hold your horses on the sarcasm there, everybody. Peeking at http://html5shiv.googlecode.com/svn/trunk/html5.js, the html5 shiv does successfully trick IE6/7 into doing a createElement().

In karbassi's case above, one would hope IE6/7 would first pay attention to the html5 shiv, then perform the jQuery append() as expected every time after that. It apparently doesn't do things in that order when appending to an append. This is handy to know.

Answer 3

Does the HTML5 shiv handle innerHTML? IE very likely treats innerHTML differently than DOM methods like createElement, and reading the jQuery source (which I recommend), it seems your code is triggering innerHTML instead of the DOM methods. You might try rewriting <section id="fail"></section> as <section id="fail" /> (which at first glance should trigger DOM methods in the cleanup process) and see if it behaves differently. If so, you've identified a bug in jQuery and a limitation of the HTML5 shiv. If not, at least it's one possibility to cross off.

Answer 4

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

Answer 5

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/