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 section标签。我这么说是因为当我将第4步从<section>更改为<div>时，IE6/7将开始工作。

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

- Ali Karbassi

---

到目前为止，还没有找到答案。我切换回了xhtml 1.0 strict。这是我的唯一问题。 - Ali Karbassi

Answer 1

这个 bug 存在于 IE 对 innerHTML 的实现中。出于某种原因，IE 不支持通过 innerHTML 插入“未知”元素，而 DOM 脚本则没有问题。

jQuery 创建了一个容器 div，然后通过 innerHTML 插入要附加的标记。IE 现在将未知元素视为两个新的损坏元素，即 <article>content</article> 被视为 ARTICLE、#text、/ARTICLE，导致 innerHTML 出现故障。

这里有一个示例，在 IE 中检查一下，你会发现 innerHTML 插入方法错误地报告在 div 中插入了 3 个节点：http://jsbin.com/olizu

对于没有 IE 的用户，以下是屏幕截图：http://leftlogic.litmusapp.com/pub/2c3ea3e

- Remy Sharp

---

更新：截至目前，html5shiv已经修复了这个innerHTML问题，所以如果你已经在使用它，只需更新即可，否则，你应该使用它。 - lbstr

Answer 2

我也遇到了这个问题。解决方法似乎是在已经附加到文档的元素上使用innerHTML，然后提取创建的节点。我创建了这个小函数来实现： http://jdbartlett.github.com/innershiv/

- jdbartlett

---

更新：截至目前，html5shiv已经修复了这个innerHTML问题，所以如果你已经在使用它，只需更新即可，否则，你应该使用它。 - lbstr

Answer 3

大家不要用讽刺的口吻。查看http://html5shiv.googlecode.com/svn/trunk/html5.js，HTML5 Shiv 成功地欺骗了 IE6/7 进行 createElement()。

在 karbassi 的情况下，我们希望 IE6/7 首先注意 HTML5 Shiv，然后按预期执行 jQuery append()，每次都是如此。但当附加到附加时，它显然不会按照这个顺序进行。了解这一点很有用。

- simmer

---

这其实是错误的。HTML5 shiv并不能修复IE6-8中jQuery.append的bug。shiv只修复样式问题。这是由于.innerHTML中的一个bug导致的，详见我在这里的回答：https://dev59.com/C3M_5IYBdhLWcg3w3nVs#1594562 - Remy Sharp

Answer 4

HTML5 shiv是否处理innerHTML？IE很可能会与createElement等DOM方法不同地处理innerHTML，阅读jQuery源代码（我建议这样做），似乎您的代码正在触发innerHTML而不是DOM方法。您可以尝试将<section id="fail"></section>重写为<section id="fail" />（乍一看应该会在清理过程中触发DOM方法）并查看其行为是否有所不同。如果是，则已经确定了jQuery的错误和HTML5 shiv的限制。如果没有，至少这是一个可以排除的可能性。

- eyelidlessness

---

我尝试了你建议的方法，但没有任何改变。我在jQuery错误跟踪器中查找过，但没有类似这样的报告。由于它是HTML5，我知道并没有投入太多支持/思考。 - Ali Karbassi

Answer 5

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

- ZippyV

---

对我来说似乎是常识。 - micmcg

说一个多年后构想的功能集不受支持并不是被动攻击，也许它并不富有想象力或令人满意，但它绝对不是被动攻击。这只是陈述事实而已。 - eyelidlessness

是的答案并不真正相关于这个问题。 - Jourkey