Question

我将在前言中说我已经通过从根本上改变我的方法来解决这个问题。但是在解决它的过程中，我整理了一个令我着迷和烦恼的测试用例。

我有一个从AJAX调用返回的字符串。该字符串包含HTML，其中大部分都是无用的。我希望将字符串中的一个元素（及其所有子元素）插入到DOM中。对此的模拟是：

<!DOCTYPE html>
<html>
<head>
    <title>wtf?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>',
                output = $(markup).find('.good').clone().wrap('<div />').parent().html();

            $('body').append(output);
        });
    </script>
</head>

<body></body>
</html>

我在这里有这个文件的托管副本：http://alala.smitelli.com/temp/wtf_ie.html（不会永远保持这种状态）。

这个应该做的是提取.good div和子<time>元素，然后将它们插入到正文中。我.wrap().parent()提取我选择的元素以及其子元素（参见this question）。 .clone()和.html()是展示问题的设计。

对用户来说，它应该显示今天的日期。它适用于Chrome，Firefox，IE9等：

March 29, 2013

但是在IE7和8中，显示的文字是：

<:time datetime="2013-03-29">March 29, 2013

显示开头<，并以某种方式插入冒号。结束</time>标记看起来不受影响，并且未显示转义。

这里发生了什么？这是某种错误，还是预期的行为？结肠来自哪里？

编辑：就添加document.createElement('time')或html5shiv的建议而言，这些似乎都没有改变行为。

Answer 1

非常令我惊讶的是，我发现如果我在实际解析标记方面从等式中删除jQuery，问题就会消失（在IE7和IE8上），即使没有{{ 1}}或垫片/ shiv：

createElement('time')

Live Copy | Source

有一种变化，我只是使用浏览器自己处理的<!DOCTYPE html> <html> <head> <title>wtf?</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function() { var div, markup, output; markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>'; div = document.createElement('div'); div.innerHTML = markup; output = $(div).find('.good').clone().wrap('<div />').parent().html(); $('body').append(output); }); </script> </head> <body></body> </html>和一个断开的innerHTML来解析div，而不是让jQuery为我做。

所以我不得不说这可能是jQuery在旧浏览器上处理HTML片段而不支持HTML5元素的问题。但这将是一个重要的主张，而重要的主张需要大量的证据......

但如果我更改这些行：

markup

为：

div = document.createElement('div');
div.innerHTML = markup;

output = $(div).find('.good').clone().wrap('<div />').parent().html();

我遇到了问题（在IE7和IE8上）：Live Copy | Source

所以它开始看起来像一个jQuery问题......

IE7 / 8 + <time>标签+ jQuery .clone（）=？</time>

1 个答案: