Bug Tracker

Opened 14 years ago

Closed 12 years ago

Last modified 11 years ago

#5327 closed bug (duplicate)

Internet Explorer errors when inserting HTML5 elements

Reported by: Perceptes Owned by:
Priority: major Milestone:
Component: core Version: 1.3.2
Keywords: Cc:
Blocked by: Blocking:


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.

Attachments (1)

ie_jquery.html (833 bytes) - added by Perceptes 14 years ago.
IE HTML5 element insertion test

Download all attachments as: .zip

Change History (8)

Changed 14 years ago by Perceptes

Attachment: ie_jquery.html added

IE HTML5 element insertion test

comment:1 Changed 14 years ago by 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

comment:2 Changed 14 years ago by 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.

comment:3 Changed 14 years ago by john

Component: unfilledcore

comment:4 Changed 13 years ago by dmethvin

Resolution: invalid
Status: newclosed

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

comment:5 Changed 12 years ago by paul.irish

Milestone: 1.4
Resolution: invalid
Status: closedreopened

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.

comment:6 Changed 12 years ago by paul.irish

Resolution: duplicate
Status: reopenedclosed

comment:7 Changed 12 years ago by paul.irish

Duplicate of #6485.

Note: See TracTickets for help on using tickets.