Internet Explorer errors when inserting HTML5 elements

[Perceptes]

Internet Explorer (6, 7, and 8) currently throws an error when using jQuery to insert HTML5 elements into the page using DOM manipulation functions. The HTML5 shiv script created by John Resig and Remy Sharp allows IE to recognize and correctly style HTML5 elements, but it fails to correctly parse elements inserted after the initial page load.

This issue has been discussed on these pages: ​http://stackoverflow.com/questions/1191164/jquery-html5-append-appendto-and-ie ​http://groups.google.com/group/jquery-en/browse_thread/thread/58a9cbc1068d28c0/eb4bedb2cc36b126?#eb4bedb2cc36b126

It was suggested in the Google Group thread that this issue is caused by jQuery using innerHTML instead of createElement, though even when inserting HTML5 elements into each other one at a time I found that the same error was received.

Attached is a simple test case that shows this behavior.

[Perceptes]

IE HTML5 element insertion test

[remysharp]

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

[dmethvin]

Given that IE supports neither XHTML nor HTML5, I'm not sure what jQuery can do. If you use the $("<unknownelement />") technique to create the element it will work, but only because jQuery has an optimization to use createElement for that one case. The performance implications of having jQuery parse or even preprocess the HTML string to allow HTML5 elements seem horrific.

[dmethvin]

Use modernizr or a similar script to provide HTML5 tag support in IE.

[paul.irish]

Modernizr doesn't fix this issue. It's tricky. I'm going to merge this in with #6485 which covers this topic with potential solutions.

Thanks for the report and details, perceptes.

[paul.irish]

Duplicate of #6485.