Fantastic!! Thanks for those excellent replies! Much appreciated. :D
On Sep 15, 12:07 pm, Ricardo <ricardob...@gmail.com> wrote:
> 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/
