jQuery、html5、append()/appendTo() 和 IE [英] jQuery, html5, append()/appendTo() and IE

问题描述

如何复制:

1. 创建一个 html5 页面.

2. 确保您添加了来自 remysharp.com/2009/01/07/html5-enabling-script/的脚本，以便 IE 注意到这些标签.

3. 创建一个硬编码的

   标签.

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

5. 重复上一步.$('#whatever').append('

   '); 这是 IE6/7 失败的地方.Firefox/Safari 将继续工作.

错误

想法

• 可能是 IE6/7 无法处理 HTML5 部分标签.我这样说是因为当我将第 4 步从

  更改为

  时，IE6/7 将开始工作.

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

解决方案

该错误存在于 IE 的innerHTML 实现中——出于某种原因，它不喜欢通过innerHTML 插入未知"元素——而DOM 脚本则很好.

jQuery 使用创建一个保持 div，然后通过 innerHTML 放入要附加的标记.IE 现在将未知元素视为两个新的损坏元素，即

content</article> 被视为 ARTICLE, #text, /ARTICLE, 由innerHTML borking引起.

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

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

How to replicate:

1. Create an html5 page.

2. Make sure you have the script from remysharp.com/2009/01/07/html5-enabling-script/ added so that IE will notice the tags.

3. Create an hardcoded <section id='anything'></section> tag.

4. Using jQuery 1.3.2, append another section tag: $('#anything').append('<section id="whatever"></section>'); So far, everything works in all the browsers.

5. Repeat the previous step. $('#whatever').append('<section id="fail"></section>'); This is where IE6/7 fails. Firefox/Safari will continue working.

Error

Thoughts

• It could be that IE6/7 can't handle the HTML5 section tag. I say this because when I change step 4 from <section> to <div>, IE6/7 will start working.

• If I use document.createElement() and create my new element, it works, but it seems like jQuery's append() has a problem with html5 elements.

解决方案

The bug is in IE's implementation of innerHTML - for some reason it doesn't like the "unknown" elements being inserted via innerHTML - whereas DOM scripting is fine.

jQuery uses creates a holding div, and then drops in the markup you want to append in via innerHTML. IE now sees the unknown elements as two new broken elements, i.e. <article>content</article> is seen as ARTICLE, #text, /ARTICLE, caused by innerHTML borking.

Here's an example, check it out in IE and you'll see that innerHTML insertion method incorrectly reports 3 nodes inserted in the div: http://jsbin.com/olizu

Screenshot for those without IE: http://leftlogic.litmusapp.com/pub/2c3ea3e

这篇关于jQuery、html5、append()/appendTo() 和 IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！