[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
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 wrote:
> Fantastic!! Thanks for those excellent replies! Much appreciated. :D
>
> On Sep 15, 12:07 pm, Ricardo 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:
>
> > $('')
> > .append( $('').append( $(' > href="http://www.w3.org";>Guest') )
> > .append( $('').append( $('This is the comment > p>') ) );
>
> > cheers
> > Ricardo
>
> > On Sep 15, 9:29 am, Nick Fitzsimons wrote:
>
> > > 2009/9/15 Perceptes :
>
> > > > 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 or
> > > ), 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:
> > > > > ame)>
> > > and
> > > > > 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/
[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
Fantastic!! Thanks for those excellent replies! Much appreciated. :D
On Sep 15, 12:07 pm, Ricardo 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:
>
> $('')
> .append( $('').append( $('http://www.w3.org";>Guest') )
> .append( $('').append( $('This is the comment p>') ) );
>
> cheers
> Ricardo
>
> On Sep 15, 9:29 am, Nick Fitzsimons wrote:
>
>
>
> > 2009/9/15 Perceptes :
>
> > > 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 or
> > ), 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:
> > > ame)>
> > and
> > > 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/
[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
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:
$('')
.append( $('').append( $('Guest') )
.append( $('').append( $('This is the comment') ) );
cheers
Ricardo
On Sep 15, 9:29 am, Nick Fitzsimons wrote:
> 2009/9/15 Perceptes :
>
>
>
> > 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 or
> ), 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:
> ame)>
> and
> 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/
[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
2009/9/15 Perceptes :
>
> 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 or
), 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:
and
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/
