有新更新时自动添加到 DOM答案

【问题标题】：Automatically add to DOM when there is new updates有新更新时自动添加到 DOM
【发布时间】：2020-09-25 09:53:31
【问题描述】：

我正在尝试创建一个 HTML 页面，当有新的 cmets 添加到数据库时，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 作为数据库。

【问题讨论】：

是 db firestore 吗？
是的，我正在使用 Firestore
您是否使用此代码从数据库中获取实时更新？
不，我只有在它加载页面时才得到它。我应该添加监听器吗？它会起作用吗？
如果添加监听器，它会起作用。但还有另一种方式。只需在submitreview 的末尾调用函数foo。我觉得就够了

标签： javascript html dom google-cloud-firestore

【解决方案1】：

没有实时获取此代码。如果您添加一个侦听器，它将起作用。但还有另一种方式。只需在 submitreview 结束时调用函数 foo。我想这就够了。乐于助人:)

【讨论】：