jQuery、html5、append()/appendTo() 和 IE [英] jQuery, html5, append()/appendTo() and IE
问题描述
如何复制:
创建一个 html5 页面.
确保您添加了来自 remysharp.com/2009/01/07/html5-enabling-script/的脚本,以便 IE 注意到这些标签.
创建一个硬编码的
标签.
使用 jQuery 1.3.2,附加另一个部分标签:
$('#anything').append('<section id="whatever"></section>');
到目前为止,一切都在所有浏览器中运行.重复上一步.
$('#whatever').append('');
这是 IE6/7 失败的地方.Firefox/Safari 将继续工作.
错误
想法
可能是 IE6/7 无法处理 HTML5 部分标签.我这样说是因为当我将第 4 步从
更改为
时,IE6/7 将开始工作.如果我使用
document.createElement()
并创建我的新元素,它可以工作,但似乎 jQuery 的append()
与 html5 有问题元素.解决方案该错误存在于 IE 的innerHTML 实现中——出于某种原因,它不喜欢通过innerHTML 插入未知"元素——而DOM 脚本则很好.
jQuery 使用创建一个保持 div,然后通过 innerHTML 放入要附加的标记.IE 现在将未知元素视为两个新的损坏元素,即
被视为content</article> ARTICLE
,#text
,/ARTICLE
, 由innerHTML borking引起.这里有一个例子,在IE中查看,你会看到innerHTML插入方法错误地报告了div中插入的3个节点:http://jsbin.com/olizu
没有 IE 的屏幕截图:http://leftlogic.litmusapp.com/pub/2c3ea3e一个>
How to replicate:
Create an html5 page.
Make sure you have the script from remysharp.com/2009/01/07/html5-enabling-script/ added so that IE will notice the tags.
Create an hardcoded
<section id='anything'></section>
tag.Using jQuery 1.3.2, append another section tag:
$('#anything').append('<section id="whatever"></section>');
So far, everything works in all the browsers.Repeat the previous step.
$('#whatever').append('<section id="fail"></section>');
This is where IE6/7 fails. Firefox/Safari will continue working.
Error
Thoughts
It could be that IE6/7 can't handle the HTML5 section tag. I say this because when I change step 4 from
<section>
to<div>
, IE6/7 will start working.If I use
document.createElement()
and create my new element, it works, but it seems like jQuery'sappend()
has a problem with html5 elements.
解决方案The bug is in IE's implementation of innerHTML - for some reason it doesn't like the "unknown" elements being inserted via innerHTML - whereas DOM scripting is fine.
jQuery uses creates a holding div, and then drops in the markup you want to append in via innerHTML. IE now sees the unknown elements as two new broken elements, i.e.
<article>content</article>
is seen asARTICLE
,#text
,/ARTICLE
, caused by innerHTML borking.Here's an example, check it out in IE and you'll see that innerHTML insertion method incorrectly reports 3 nodes inserted in the div: http://jsbin.com/olizu
Screenshot for those without IE: http://leftlogic.litmusapp.com/pub/2c3ea3e
这篇关于jQuery、html5、append()/appendTo() 和 IE的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文