JavaScript (jQuery) 只是不断将数据附加到

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

.empty()

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.

所以要清空你的 div 使用:

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