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， append 另一个部分标签:$('#anything').append('<section id="whatever"></section>');到目前为止，一切都适用于所有浏览器。

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

错误

想法

• 可能是IE6/7 无法处理HTML5 section 标签。我这样说是因为当我从 <section> 更改第 4 步时至 <div> , IE6/7 将开始工作。

• 如果我使用 document.createElement()并创建我的新元素，它有效，但它看起来像 jQuery 的 append() html5 元素有问题。

Answer 1

该错误存在于 IE 的 innerHTML 实现中 - 出于某种原因，它不喜欢通过 innerHTML 插入的“未知”元素 - 而 DOM 脚本是好的。

jQuery 使用创建一个保持 div，然后通过 innerHTML 放入您想要 append 的标记。 IE 现在将未知元素视为两个新的损坏元素，即 <article>content</article>被视为 ARTICLE , #text , /ARTICLE , 由 innerHTML borking 引起。

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

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