javascript – IE7 / 8标签jQuery .clone()=？

2023年8月20日 149次阅读

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

我有一个从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

开口 标签看起来不受影响,并且未显示转义.

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

编辑：至于添加document.createElement(‘time’)或html5shiv的建议,这些似乎都没有改变行为.

最佳答案 令我惊讶的是,我发现如果我从实际解析标记的方程中删除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>

Live Copy | Source

改变之处在于我只是使用浏览器自己的innerHTML处理和断开连接的div来解析标记,而不是让jQuery为我做这件事.

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

但如果我更改这些行：

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 | Source

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

点赞