Skip to main content

Bug Tracker

Side navigation

#5327 closed bug (duplicate)

Opened October 06, 2009 03:54AM UTC

Closed December 06, 2010 07:40PM UTC

Last modified March 10, 2012 11:23AM UTC

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:
Description

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 (0.8 KB) - added by Perceptes October 06, 2009 03:54AM UTC.

    IE HTML5 element insertion test

Change History (7)

Changed October 20, 2009 01:20PM UTC by remysharp comment:1

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

Changed October 27, 2009 12:34PM UTC by dmethvin comment:2

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.

Changed November 11, 2009 08:13PM UTC by john comment:3

component: unfilledcore

Changed November 19, 2010 02:41AM UTC by dmethvin comment:4

resolution: → invalid
status: newclosed

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

Changed December 06, 2010 07:39PM UTC by paul.irish comment:5

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.

Changed December 06, 2010 07:40PM UTC by paul.irish comment:6

resolution: → duplicate
status: reopenedclosed

Changed December 06, 2010 07:40PM UTC by paul.irish comment:7

Duplicate of #6485.