jQuery，html5，append（）/ appendTo（）和IE

How to replicate:

1. Create an html5 page.

   创建一个html5页面。

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

   确保添加了remysharp.com/2009/01/07/html5-enabling-script/中的脚本,以便IE注意到这些标记。

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.

   使用jQuery 1.3.2,附加另一个section标签:$('#anything')。append('

   ');到目前为止,一切都适用于所有浏览器。

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

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

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

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.

  可能是IE6 / 7无法处理HTML5节标记。我这样说是因为当我将步骤4从

  更改为

  时,IE6 / 7将开始工作。

• 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.

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

5 个解决方案

#1

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.

这个bug是在IE的innerHTML实现中 - 由于某种原因,它不喜欢通过innerHTML插入的“未知”元素 - 而DOM脚本很好。

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.

jQuery使用创建一个持有div,然后通过innerHTML删除你想要追加的标记。 IE现在将未知元素视为两个新的破坏元素,即

content 被视为由URLHTML borking引起的ARTICLE,#text,/ ARTICLE。

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

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

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

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

#2

I ran into this issue, too. The solution seems to be to use innerHTML on an element that's already attached to the document, then extract the created nodes. I created this li'l function to do that:

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

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

#3

Hold your horses on the sarcasm there, everybody. Peeking at http://html5shiv.googlecode.com/svn/trunk/html5.js, the html5 shiv does successfully trick IE6/7 into doing a createElement().

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

In karbassi's case above, one would hope IE6/7 would first pay attention to the html5 shiv, then perform the jQuery append() as expected every time after that. It apparently doesn't do things in that order when appending to an append. This is handy to know.

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

#4

Does the HTML5 shiv handle innerHTML? IE very likely treats innerHTML differently than DOM methods like createElement, and reading the jQuery source (which I recommend), it seems your code is triggering innerHTML instead of the DOM methods. You might try rewriting <section id="fail"></section> as <section id="fail" /> (which at first glance should trigger DOM methods in the cleanup process) and see if it behaves differently. If so, you've identified a bug in jQuery and a limitation of the HTML5 shiv. If not, at least it's one possibility to cross off.

HTML5 shiv是否处理innerHTML? IE很可能不同于DOM方法(如createElement)和读取jQuery源(我推荐)处理innerHTML,似乎你的代码触发innerHTML而不是DOM方法。您可以尝试将

重写为

(乍一看应该在清理过程中触发DOM方法)并查看它是否表现不同。如果是这样,你已经发现了jQuery中的一个错误以及HTML5 shiv的限制。如果没有,至少这是一种可能性。

#5

HTML5 didn't exist when IE6 and 7 were developed.

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