有新更新时自动添加到DOM

Question

我正在尝试创建一个HTML页面，当向数据库添加新注释时，DOM元素将自动更新。这是HTML代码

    <h1 id="name" style="text-align: center"></h1> 
    <h2 id="singername" style="text-align: center"></h2>
    <textarea id="content"></textarea>
    <br />
    <button type="submit" id="submitreview" onclick="submitreview()">submit</button>

这里是单击提交时向数据库添加评论的Javascript代码：

    async function submitreview() {
        var selectedone = localStorage.getItem("category");
        var selectedtwo = localStorage.getItem("song");
        const reviewcontent = document.getElementById("content");
        var d = new Date();
        e = d.toLocaleString();
        g = userID;
        namelist = [];
        await db.collection("User").doc(g).get().then(function(doc3) {
            if (doc3.exists) {
                console.log(doc3.data().name_user);
                namelist.push(doc3.data());
            } else {
                console.log("nothing here exist");
            }
                }).catch(function(error) {
        console.log("Error getting document:", error);
        });
        var username = namelist[0].name_user;
        db.collection("Song").doc(selectedone).collection("songs").doc(selectedtwo).collection("reviews").doc().set({
            review_content: reviewcontent.value,
            review_date: e,
            user_id: userID,
            user_name: username,
        })
        document.getElementById("content").value = "";
    }

这是基于数据库中的数据加载DOM元素的JavaScript代码：

async function foo() {
        var selectedone = localStorage.getItem("category");
        var selectedtwo = localStorage.getItem("song");
        var contentresult = [];
        await db.collection("Song").doc(selectedone).collection("songs").doc(selectedtwo).collection("reviews").get().then(function(querySnapshot) {
                querySnapshot.forEach(function(doc2) {
                    console.log(doc2.id, " => ", doc2.data());
                    contentresult.push(doc2.data());
                    // console.log(doc2.data()[1].review_date.todatestring());
                    });
                })
                .catch(function(error) {
                    console.log("Error getting documents: ", error);
                });
                console.log(contentresult);
        const reviewlist = document.getElementById("reviewlist");
        for(let b = 0; b < contentresult.length; b++) {         
            var node = document.createElement('div');

            var size = document.createElement('h2');
            var size2 = document.createElement('h2');
            var size3 = document.createElement('p');
            var breakpoint = document.createElement('br');
            var anotherbreakpoint = document.createElement('br');

            size.setAttribute('class','left');
            size2.setAttribute('class','right');

            var text1 = document.createTextNode(contentresult[b].user_name + ' - ');
            var text2 = document.createTextNode('- ' + contentresult[b].review_date);
            var text3 = document.createTextNode(contentresult[b].review_content);

            size.appendChild(text1);
            size2.appendChild(text2);
            size3.appendChild(text3);

            node.appendChild(size);
            node.appendChild(size2);
            node.appendChild(breakpoint);
            node.appendChild(anotherbreakpoint);
            node.appendChild(size3);

            reviewlist.appendChild(node);

            }
    }

现在，每次添加评论以查看页面上的更新时，我都必须重新加载页面，如何使其与数据库中的更新同步。我使用Firestore作为数据库。

Answer 1

此代码没有实时获取信息。如果添加侦听器，它将起作用。但是还有另一种方式。只需在submitreview的末尾调用函数foo。我认为就足够了。乐于助人：）