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

Posted

技术标签:

【中文标题】jQuery、html5、append()/appendTo() 和 IE【英文标题】:jQuery, html5, append()/appendTo() and IE 【发布时间】:2010-11-14 12:55:44 【问题描述】:

如何复制:

    创建一个 html5 页面。

    确保您已添加来自 remysharp.com/2009/01/07/html5-enabling-script/ 的脚本,以便 IE 注意到标签。

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

    使用 jQuery 1.3.2,附加另一个部分标签:$('#anything').append('<section id="whatever"></section>'); 到目前为止,所有浏览器都可以正常工作。

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

错误

想法

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

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

【问题讨论】:

到目前为止,还没有找到答案。我切换回 xhtml 1.0 strict。这是我唯一的问题。 【参考方案1】:

在开发 IE6 和 7 时,HTML5 还不存在。

【讨论】:

对我来说似乎是常识 不支持多年后构思的功能集并不是被动攻击性的;也许它没有想象力或令人满意,但它绝对不是被动攻击。这只是一个事实陈述。 是的答案与问题并不真正相关。【参考方案2】:

各位,请保持冷静。查看http://html5shiv.googlecode.com/svn/trunk/html5.js,html5 shiv 确实成功地欺骗了 IE6/7 执行 createElement()。

在上面的 karbassi 的情况下,人们希望 IE6/7 会首先关注 html5 shiv,然后每次都按预期执行 jQuery append()。附加到附加时,它显然不会按该顺序执行操作。这很容易知道。

【讨论】:

这实际上是错误的。 HTML5 shiv 没有修复 IE6-8 jQuery.append 错误。 shiv 修复了样式问题。这是由于 .innerHTML 中的一个错误,正如我在此处的回答中所解释的那样:***.com/questions/1191164/…【参考方案3】:

HTML5 shiv 是否处理innerHTML? IE 很可能将innerHTMLcreateElement 之类的DOM 方法区别对待,并且阅读jQuery 源代码(我推荐),看来您的代码正在触发innerHTML 而不是DOM 方法。您可以尝试将<section id="fail"></section> 重写为<section id="fail" />(乍一看应该会在清理过程中触发DOM 方法),看看它的行为是否不同。如果是这样,您已经确定了 jQuery 中的一个错误和 HTML5 shiv 的限制。如果没有,至少有一种可能划掉。

【讨论】:

我尝试了您的建议,但没有任何区别。我在 jQuery 错误跟踪器中进行了检查,没有任何类似的报告。由于它是 html5,我知道没有太多的支持/想法。【参考方案4】:

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

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

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

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

【讨论】:

更新:截至目前,html5shiv 已经修复了这个 innerHTML 问题,所以如果您已经在使用它,只需更新它并做好您的工作,否则,您应该使用它。【参考方案5】:

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

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

【讨论】:

更新:截至目前,html5shiv 已经修复了这个 innerHTML 问题,所以如果您已经在使用它,只需更新它并做好您的工作,否则,您应该使用它。

以上是关于jQuery、html5、append()/appendTo() 和 IE的主要内容,如果未能解决你的问题,请参考以下文章

通过 IE10 中的 jQuery 在 Textarea 上的 HTML5 占位符属性

html5 app开发用啥框架比较好

如何通过 jQuery 的 .append() 添加 DOM 元素(Angular 指令)?

js原生方式实现jquery中的append()方法

跨平台的html5移动app开发框架都有哪些

一个基于HTML5、jQuery的小部件库,用于构建现代网络应用程序。