Unfortunately, IE still chokes even if inserting the elements
individually with chained appends like Ricardo described. I've been
fooling around with it for a couple hours and haven't come up with a
syntax that will make it parse correctly. I'm going to try each
append as a separate statement instead of chaining them as a last
resort. If that doesn't work, I think I may have to give up on using
HTML5 for this for now - it's not worth the time it's taking. :
( Thanks again for the help.
On Sep 15, 2:35 pm, Perceptes <jimmycua...@gmail.com> wrote:
> 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/
