4

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

我有一个从 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（不会永远存在）。

这应该做的是提取.gooddiv 和子<time>元素，然后将它们插入到正文中。.wrap().parent()除了子元素之外，我还提取了我选择的元素（请参阅此问题）。.clone()和.html()是证明问题的设计。

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

March 29, 2013

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

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

显示了开口<，并且以某种方式插入了冒号。结束</time>标签看起来不受影响，并且没有显示为转义。

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

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

4

1 回答 1

2

令我惊讶的是，我发现如果我在实际解析标记方面从等式中删除 jQuery，问题就会消失（在 IE7 和 IE8 上），即使没有createElement('time')或 shim/shiv：

<!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来解析markup，而不是让 jQuery 为我做这件事。

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

但如果我改变这些行：

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

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

到：

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

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

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

于 2013-03-29T18:36:41.373 回答