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，添加另一个部分标记：$('#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

这个错误出现在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/

Answer 3

每个人都把你的马放在那里的讽刺上。窥视http://html5shiv.googlecode.com/svn/trunk/html5.js，html5 shiv成功地欺骗IE6 / 7进行createElement（）。

在上面的karbassi案例中，人们希望IE6 / 7首先关注html5 shiv，然后在每次之后按预期执行jQuery append（）。当附加到追加时，它显然不按该顺序执行操作。这很方便。

Answer 4

HTML5 shiv是否处理innerHTML？ IE很可能与innerHTML之类的DOM方法不同地处理createElement，并且阅读jQuery源（我推荐），看起来你的代码正在触发innerHTML而不是DOM方法。您可以尝试将<section id="fail"></section>重写为<section id="fail" />（乍一看应该在清理过程中触发DOM方法）并查看它是否表现不同。如果是这样，你已经发现了jQuery中的一个错误以及HTML5 shiv的限制。如果没有，至少这是一种交叉的可能性。

Answer 5

开发IE6和7时，HTML5不存在。