Получение данных из Firestore с чистым JavaScript

Question

этот вопрос, вероятно, очень прост, но я застрял в Firestore.Это мой первый проект с firestore + js, и я пытаюсь получать и отображать данные из моей базы данных.У меня такое ощущение, что я делаю что-то действительно глупое, потому что мне кажется, что я зацикливаюсь на своих данных и перезаписываю их, поэтому я вижу только один элемент статьи, даже если из базы данных должно быть 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);
    });
  });
});

Answer 1

После предложения Алекса я решил использовать другой подход для создания элементов 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);
    });
  });
});```