从Firebase检索数据并在单独的分区中显示

Question

我真的很难理解，所以如果有任何帮助，我们将不胜感激。我已经成功地将javascript中的数据附加到firebase中。现在我想在Div中显示一个类似标题内容和日期的帖子，当我在firebase中添加新帖子时，它不会覆盖自己，但要显示它，我需要一个新的Div。这是我从Javascrip到Firebase的附加代码：

document.querySelector("#submitButton").addEventListener("click", function() {
let postAuthor = document.querySelector("#postAuthor").value;
let postTitle = document.querySelector("#postTitle").value;
let postContent = document.querySelector("#postContent").value;
let postDate = document.querySelector("#postDate").value;

if (
postAuthor === "" ||
postTitle === "" ||
postContent === "" ||
postDate === ""
) {
alert("Fields Empty");
} else {
db.collection("posts")
.doc()
.set({
author: postAuthor,
createdAt: postDate,
postName: postTitle,
postContent: postContent
});
}
});

Answer 1

你的意思是这样的吗？

db.collection("posts")
.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
let elm = document.createElement("div");
elm.innerText = doc.data().postContent;
document.body.appendChild(elm);
});
});

关于这一点，您可能有很多需要更改和改进的地方，因此我建议您阅读/遵循一些关于动态生成HTML的教程，以及针对web开发人员的Firestore代码库入门教程。