Question

过去几周，当我遇到这个奇怪的错误时，我一直在研究一个复杂的项目。我已经在下面的代码中找出了我的问题，这是可以重现它的最小的有效HTML和JS：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chat</title>
    <script type="text/javascript">
    //<![CDATA[         
        function refresh()
        {
            var old = document.getElementById("conversation").innerHTML;
            var message = '<img/>';

            if(old != message) {
                alert("Old:\n" + old);
                alert("New:\n" + message);
                //alert("Refreshed!");
                document.getElementById("conversation").innerHTML = message;
            }
        }
    //]]>
    </script>
</head>
<body onload="refresh()">
    <div id="conversation"></div>
    <script type="text/javascript">var myVar = setInterval(function(){refresh();},1000);</script>
</body>
</html>

每秒，函数refresh()都会检查div中的代码是否与存储的字符串不同。如果不同，则用字符串替换div的内容。但是，每次检查时，它都会看到内容和存储的字符串不同。虽然字符串为<img/>，但innerHTML将返回为<img>。我发现对于任何自动关闭标签，它会自动删除斜杠。对于不应该自动关闭的标记（如<i>），它会自动将其拆分为两个标记（如<i></i>）。对于任何其他标签或文本，它什么都不做。

我真的不明白为什么div的内容会发生变化。如果有人能解释原因，我会很感激。如果有人甚至可以提供可能的解决方案，我将不胜感激。

Answer 1

那是因为浏览器使用HTML解析器，而不是页面的XML解析器，这就是为什么它会删除结束斜杠。

Answer 2

我自己是一个相对的新手，但我认为Matt Ball所指的是你在创建一个新的DOM元素时创建一个字符串的事实所以对你的函数进行一个简单的改变就是：

var convo = document.getElementById("conversation");

function refresh() {
    var old = convo.innerHTML;
    var message = document.createElement("IMG");
    if (old != message) {
        alert("Old:\n" + old);
        alert("New:\n" + message);
        //alert("Refreshed!");
        convo.innerHTML = message;
    }

}

这是FIDDLE

注意：我添加了全局convo变量以减少击键次数，并使用document.createElemet代替innerHTML将新图像元素添加到DOM。然后，您可以使用firstChild方法调用函数内部或外部的图像元素，如下所示：

convo.firstChild;

JS：innerHTML导致内容无意中发生变化

2 个答案: