Regarding #1, he is already doing that (in html5.js). IE fails to
parse the new elements in innerHTML even after introducing the new
tags via createElement.
#2 works fine. If you provide jQuery a single tag then it will use
createElement, ex:
$('<article/>')
.append( $('<header/>').append( $('<a href="http://
www.w3.org">Guest</a>') )
.append( $('<section/>').append( $('<p>This is the comment</
p>') ) );
cheers
Ricardo
On Sep 15, 9:29 am, Nick Fitzsimons <n...@nickfitz.co.uk> wrote:
> 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.tagN
> ame)>
> and
> <javascript:alert(document.body.childNodes[0].childNodes[1].lastChild.tagNa
> me)>
> 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 Fitzsimonshttp://www.nickfitz.co.uk/
