Javascript 使用jQuery更新表，但浏览器不刷新页面

我有一个node.js和sockets应用程序，我正在使用它来构建SPA。用户填写表格以创建新的大厅。当他们提交它时，它向服务器发送一个套接字事件，服务器添加大厅，然后服务器向每个人发送一个事件，其中包含更新的大厅列表。当这种情况发生时，我的客户端JS接收大厅列表并更新一个表。在查看浏览器控制台时，这似乎可以正常工作。我看到大厅信息记录在我的更新大厅功能中。我看到它在大厅中循环，甚至看到html更新了新信息。但是，浏览器似乎不会更新视图。如果我刷新请求相同大厅信息的页面，页面将更新。此外，在刷新之后，将为该用户直观地更新未来的大厅更新

socket.on('lobby list', function(data){
    if(data.lobbies.length > 0){
        update_lobbies(data.lobbies);
    }
}

然后调用update_lobbies（）：

const update_lobbies=（lobbies）=>{
var lobbies_table=document.getElementById（'lobbies_table'）；
大厅_table.innerHTML=“”；
console.dir（大厅）；
$（“#大厅表”）。追加（“+
“+”名称“+”+
“+”参与者“+”+
“+”当前状态“+”+
“+”操作“+”+
"");
for（var i=0；i

---

一件可能相关的事情是我有一个

e.preventDefault（）以防止在提交表单时重新加载页面。删除此选项显然“修复”了问题，因为我正在重新加载，但我不希望必须重新加载页面才能让浏览器更新视图。我还没有完全存储状态信息，所以无论如何，重新加载也不是一个选项。
我犯了一个愚蠢的错误。如果页面已加载且没有大厅，则我将隐藏该表。我刚忘了在大厅里展示它

const update_lobbies = (lobbies) => {
        var lobbies_table = document.getElementById('lobbies_table');
        lobbies_table.innerHTML = "";

        console.dir(lobbies);

        $("#lobbies_table").append("<tr>" + 
        "<th>" + "Name" + "</th>" +
        "<th>" + "Participants" + "</th>" +
        "<th>" + "Current State " + "</th>" +
        "<th>" + "Actions" + "</th>" +
        "</tr>");

        for (var i = 0; i < lobbies.length; i++){

            console.log("looping");

            $("#lobbies_table").append("<tr>" + 
            "<td>" + lobbies[i].name + "</td>" +
            "<td>" + lobbies[i].participants.length + "/" + lobbies[i].capacity + "</td>" +
            "<td>" + lobbies[i].state + "</td>" +
            "<td>" + "<button id=\"join_lobby\" value=\"" + lobbies[i].name + "\">Join</button>" + " | " + "<button id=\"spectate_lobby\" value=\"" + lobbies[i].name + "\">Spectate</button>" + "</td>" +
            "</tr>");

        }
}