使用纯JavaScript从Firestore接收数据

这个问题可能真的很简单，但我有点被Firestore卡住了。这是我使用firestore+js的第一个项目，我正在尝试从数据库接收和显示数据。我有一种感觉，我在做一些非常愚蠢的事情，因为我似乎在循环遍历我的数据并覆盖它，这就是为什么我只能看到一个article元素，即使应该从数据库中获取2个

document.addEventListener('DOMContentLoaded', event => {
  const app = firebase.app();
  const db = firebase.firestore();
  const myProducts = db.collection('products');
  myProducts.onSnapshot(products => {
    const productsContainer = document.querySelector('#products__container');
    products.forEach(doc => {
      data = doc.data();
      console.log(data);
      let productMarkup = `<article id="${doc.id}">
        <h4>${data.name}</h4>
        <p>${data.price}</p>
      </article>`;
      productsContainer.innerHTML = productMarkup;
      console.log(productMarkup);
    });
  });
});

document.addEventListener（'DOMContentLoaded'，事件=>{
const-app=firebase.app（）；
const db=firebase.firestore（）；
const myProducts=db.collection（“产品”）；
myProducts.onSnapshot（产品=>{
const productsContainer=document.querySelector（“#products_u容器”）；
products.forEach（doc=>{
data=doc.data（）；
控制台日志（数据）；
让productMarkup=`
在Alex的建议之后，我决定采用不同的方法来创建DOM元素

  const db = firebase.firestore();
  const myProducts = db.collection('products');
  const productsContainer = document.querySelector('#products__container');

  function renderProduct(doc) {
    const docFrag = document.createDocumentFragment();
    let article = document.createElement('article');
    let productName = document.createElement('h4');
    let productPrice = document.createElement('p');

    article.setAttribute('id', doc.id);
    productName.textContent = doc.data().name;
    productPrice.textContent = doc.data().price;

    docFrag.appendChild(productName);
    docFrag.appendChild(productPrice);

    article.appendChild(docFrag);
    productsContainer.appendChild(article);
  }

  myProducts.onSnapshot(products => {
    products.forEach(doc => {
      data = doc.data();
      console.log(data);
      renderProduct(doc);
    });
  });
});```

在循环的每次迭代中，您都会不断重新分配产品容器的innerhtml。这也是一种非常低效的生成Dom元素的方法，我建议在foeach循环之前声明一个文档片段，然后在循环完成后将子项附加到片段中，将文档片段注入Dom:）嗨，Alex，谢谢你指出我的错误。我采取了不同的方法。如果你有时间看一看并给出一些反馈，如果你发现它比我以前的代码更优化，我将非常感激。