Fatal编程技术网
  • javascript/
  • Javascript JS:innerHTML导致内容意外更改

Javascript JS:innerHTML导致内容意外更改

javascript html

Javascript JS:innerHTML导致内容意外更改,javascript,html,innerhtml,Javascript,Html,Innerhtml,在过去的几周里，当我遇到这个奇怪的bug时，我一直在从事一个复杂的项目。我在下面的代码中隔离了我的问题，这是复制它的最小可能的有效HTML和JS： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chat</title> <scri

在过去的几周里，当我遇到这个奇怪的bug时，我一直在从事一个复杂的项目。我在下面的代码中隔离了我的问题，这是复制它的最小可能的有效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>


聊天
//
var myVar=setInterval（函数（）{refresh（）；}，1000）；
函数
refresh（）
每秒检查
div
中的代码是否与存储的字符串不同。如果它不同，则用字符串替换
div
的内容。但是，每次检查时，它都会看到内容和存储的字符串不同。尽管字符串是
，但
内部HTML
返回为
。我发现，对于任何自动关闭标记，它都会自动删除斜杠。对于不应该自动关闭的标记（如
），它会自动将其拆分为两个标记（如
）。对于任何其他标记或文本，它不起任何作用

我真的不明白为什么
div
的内容在变化。如果有人能解释原因，我将不胜感激。如果有人能提供一个可能的解决方案，我将不胜感激。

这是因为浏览器使用的是HTML解析器，而不是页面的XML解析器，这就是它将删除结束斜杠的原因

我自己也是一个新手，但我认为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;
    }

}
这是一个

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

convo.firstChild;
div的内容正在更改，因为字符串
不等于字符串
。首先，为什么要对HTML执行基于字符串的相等性检查而不是正确的DOM操作？谢谢大家的帮助。整个程序从服务器获取可以包含HTML标记的字符串，并将它们放入
div
。它仅在检测到当前字符串和上一个字符串之间存在差异时更新。当我只尝试比较字符串时，我希望避免使用像DOM操作这样复杂的操作。您关于这不可能的信息让我找到了一个不同的解决方案：将
old
存储为静态变量，以消除读取文档本身的需要。再次感谢您。请记住，
conva.innerHTML=message将显示由浏览器解析
document.createElement（“IMG”）
产生的字符串，而不是读取
的文本字符串。也许更好的方法是使用
conva.appendChild（message）
，但是您必须重新构造代码，这样您的
setInterval
函数不会导致它每秒追加一个新的子级。