Question

我正在尝试使用Django在Python中编写一个简单的聊天应用程序。基本上我有一个空div，然后我使用jQuery从我从服务器获得的一些JSON附加一些HTML。我检查了服务器的输出并且返回的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>

你可以看到我有：

$("#id_chat_area").html()

我认为每次循环迭代时都会完全清除HTML的div，而是从JSON返回的数据只是永远保持打印而没有结束只是在每个循环中附加数据而不清除div。任何人都可以建议一些代码，每次浏览器执行该函数时都会清除div，这样它只显示循环最后一次迭代的数据吗？

如果您需要更多信息，我很乐意提供。我很难接受这个。

Answer 1

变化

$("#id_chat_area").html()至$("#id_chat_area").html("")可能有所帮助。

我的思维过程是一个人调用html .html（）而另一个人清除它.html（“”）..

Answer 2

.empty()

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

所以要清空你的div使用：

$("#id_chat_area").empty();

JavaScript（jQuery）只是将数据附加到<div>

2 个答案: