HTML DIV 的长度不等于 AJAX 加载的 HTML 长度

Question

这里是 HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
<div id="SomeDiv"></div>
</body>
</html>

这里是'script.js'的内容：

$(function() {
    function load_text() {
        $.get('test.html').done(function(data) {
            // Check this condition below.
            if ($.trim($("#SomeDiv").html()).length != $.trim(data).length){
                $("#SomeDiv").html(data);
            }
        });
    }
    setInterval(load_text, 2000);
});

这里是'test.html'的内容：

<div>Hello World!</div>

上面的test.html就是那一行代码而已。因此，每次 AJAX 加载时，它都会 return 相同的 HTML 并用它一遍又一遍地填充 DIV 标签。根据 if 条件，#SomeDiv 中的 HTML 和 Loaded HTML 第一次不相等，之后它应该相等并且不应该重新填充 DIV.

但是第一次加载后好像长度不一样了。这简直击中了我！怎么可能？我正在加载相同的内容，然后我从另一个文件中获取相同的内容并与之前加载的内容进行比较，但它们不相等...

那是正常的还是有其他方法让它在第一次加载后不填充 DIV？

我想做的是，如果加载的内容不同则显示它，否则不显示它。

Answer 1

注意：由于括号不正确，您（编辑前）修剪了 length:)

您正在将原始文本字符串与 "structured" HTML 进行比较（在解析后可以将元素添加到 DOM 并且空格可以更改）。

尝试比较 like 与 like（先将其转换为 DOM 元素）：

// Need to wrap the incoming elements in a parent
var $data = $('<div>').html(data);
if ($.trim($("#SomeDiv").html()).length != $.trim($data.html()).length)

HTML DIV 的长度不等于 AJAX 加载的 HTML 长度

HTML Length of a DIV is not equal to the AJAX Loaded HTML Length

html

javascript

ajax

jquery