Bug Tracker

Opened 7 years ago

Closed 6 years ago

Last modified 5 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:

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.

Change History (7)

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

  • Component changed from unfilled to core

comment:4 Changed 6 years ago by dmethvin

  • Resolution set to invalid
  • Status changed from new to closed

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

comment:5 Changed 6 years ago by paul.irish

  • Milestone 1.4 deleted
  • Resolution invalid deleted
  • Status changed from closed to reopened

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 6 years ago by paul.irish

  • Resolution set to duplicate
  • Status changed from reopened to closed

comment:7 Changed 6 years ago by paul.irish

Duplicate of #6485.

Note: See TracTickets for help on using tickets.