Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

error popup screenshot

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.

like image 400
Ali Karbassi Avatar asked Jul 27 '09 23:07

Ali Karbassi


2 Answers

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

like image 55
Remy Sharp Avatar answered Sep 22 '22 14:09

Remy Sharp


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/

like image 36
jdbartlett Avatar answered Sep 19 '22 14:09

jdbartlett