2009/9/15 Perceptes <jimmycua...@gmail.com>:
>
> I've encountered a problem with the combination of jQuery, IE, and
> HTML5 elements. HTML5 elements inserted into the page after initial
> load via jQuery's DOM manipulation functions are not parsed correctly
> by IE, even with Remy Sharp's HTML5 shiv script.
>
The problem is that jQuery uses innerHTML, rather than DOM methods, to
insert the new content (which is why it's passed to jQuery as a
string). This means it relies on IE's HTML parser to correctly parse
the markup from the string when it is inserted.
When IE's parser encounters an element it doesn't recognise the name
of, it creates the element as an empty element (similar to <br> or
<img>), then parses the content as if it were sibling nodes, then
creates an empty element whose name begins with a slash (/ARTICLE for
example); you can see this on your test page by clicking on the "IE
fail" button and then entering:
<javascript:alert(document.body.childNodes[0].childNodes[1].firstChild.tagName)>
and
<javascript:alert(document.body.childNodes[0].childNodes[1].lastChild.tagName)>
in the location bar; the first will show "ARTICLE", and the second
will show "/ARTICLE".
To work around this you basically have two options:
1. Before any other script is executed, add the line:
document.createElement("article");
and add equivalent lines for any other HTML5-specific elements you
wish to use (such as section). This prompts IE's HTML parser to expect
blocks with that tagName and it will then parse them correctly.
2. Don't use jQuery's innerHTML-dependent approach to creating new
content; instead, use DOM creation methods directly, for example:
var article = document.createElement("article");
var header = article.appendChild(document.createElement("header"));
header.appendChild(document.createTextNode("Hello World");
var container = document.getElementsByTagName("div")[0];
container.insertBefore(article, container .getElementsByTagName("h2")[1]);
... and so on. (Actually, you can use jQuery for selecting the correct
insertion point and for inserting the new elements there, as jQuery
can cope with elements when inserting content.)
Regards,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
