jQuery,html5,append()/ appendTo()和IE

Question

如何复制:

1. 创建一个html5页面.

2. 确保添加了remysharp.com/2009/01/07/html5-enabling-script/中的脚本,以便IE注意到这些标记.

3. 创建一个硬编码<section id='anything'></section>标签.

4. 使用jQuery 1.3.2,附加另一个section标签:$('#anything').append('<section id="whatever"></section>');到目前为止,一切都适用于所有浏览器.

5. 重复上一步.$('#whatever').append('<section id="fail"></section>');这是IE6/7失败的地方.Firefox/Safari将继续工作.

错误

思考

• 可能是IE6/7无法处理HTML5节标记.我这样说是因为当我改变步骤4 <section>到<div>,IE6/7将开始工作.

• 如果我使用document.createElement()并创建我的新元素,它可以工作,但似乎jQuery的append()html5元素有问题.

Answer 1

这个bug是在IE的innerHTML实现中 - 由于某种原因,它不喜欢通过innerHTML插入的"未知"元素 - 而DOM脚本很好.

jQuery使用创建一个持有div,然后通过innerHTML删除你想要追加的标记.IE现在看到的未知元素作为两个新的破元件,即<article>content</article>,被视为ARTICLE,#text,/ARTICLE,引起的innerHTML borking.

这是一个例子,在IE中查看它,你会看到innerHTML插入方法错误地报告插入div中的3个节点:http://jsbin.com/olizu

没有IE的人的屏幕截图:http://leftlogic.litmusapp.com/pub/2c3ea3e

Answer 2

我也遇到了这个问题.解决方案似乎是在已经附加到文档的元素上使用innerHTML,然后提取创建的节点.我创建了这个li'l函数来做到这一点:

http://jdbartlett.github.com/innershiv/