JavaScript（jQuery）只是不断地将数据附加到<；部门>；

我正在尝试使用Django用Python编写一个简单的聊天应用程序。基本上，我有一个空div，然后使用jQuery将一些HTML附加到从服务器获得的一些JSON中。我已经检查了服务器的输出，返回的JSON是正确的，因此Django或Python没有问题

这是我的JavaScript：

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        window.setInterval(function() {
            $.getJSON("/chat/messages/" + String({{ channel.id }}) + "/", function(data) {
                $("#id_chat_area").html() // clear all HTML in the div before we start printing chat messages
                $.each(data, function(key, val) {
                    $("#id_chat_area").append("<p>" + String(val.username) + ": " + String(val.message) + "</p>")
                });
            });
        }, 5000); // length of time to refresh the function 1000 = 1 second
    }, false);
</script>

我认为每次循环迭代时都会完全清除div中的HTML，但是JSON返回的数据会一直打印，没有结束，只是在每个循环循环中添加数据，而不清除div。有人能推荐一些代码，在浏览器每次执行该函数时清除div，以便只显示循环最后一次迭代的数据

如果您需要更多信息，我很乐意提供。我在这个问题上被难住了。

改变

$（“#id_chat_area”）.html（）

到

$（“#id_chat_area”）.html（“”

可能会有所帮助

我的思维过程是，一个调用html.html（），另一个清除它

$（“#id_chat_area”）.html（）

到

$（“#id_chat_area”）.html（“”

可能会有所帮助

我的思考过程是，一个调用html.html（），另一个清除它

此方法不仅删除子元素（和其他子元素），还删除匹配元素集中的任何文本。这是因为，根据DOM规范，元素中的任何文本字符串都被视为该元素的子节点

因此，要清空div，请使用：

$（“#id_聊天区”）.empty（）

此方法不仅删除子元素（和其他子元素），还删除匹配元素集中的任何文本。这是因为，根据DOM规范，元素中的任何文本字符串都被视为该元素的子节点

因此，要清空div，请使用：

$（“#id_聊天区”）.empty（）
两个答案都有效，但我将接受.empty（）答案作为正确答案，因为它看起来更“正确”。谢谢你的回答。我对它投了更高的票，因为它有效。两个答案都有效，但我将接受.empty（）答案作为正确答案，因为它看起来更“正确”。谢谢你的回答。我投了更高的票，因为它有效。谢谢你的回答。这工作非常完美，代码中更清楚它的作用。谢谢你的回答。这工作非常完美，代码中更清楚它的作用。
$("#id_chat_area").html()