在 HTML 元素中显示 forEach

Question

我正在从 Firestore 的 forEach 中获取一组文档，我知道我正在获取这一切，因为我可以看到文档和控制台中的字段。

但是当我将 id 添加到获取的字段时，它只显示一个文档。 （应该是 5 个图块和图像，但我只能看到一个）

从阅读中我知道我只需要一些如何根据集合中获取的文档复制 HTML 代码，但我正在努力这样做。

Javascript 代码

const i = query(collection(db, "teams"));
const unsubscribe = onSnapshot(i, (querySnapshot) => {
            
     querySnapshot.forEach((doc) => {
          const docData = doc.data();

  document.getElementById("ageGroup").innerText = docData.ageGroup,
                document.getElementById("teamImage").src = docData.teamImage,
           
                
                console.log("Current data: ", docData);
                
            });

        });

HTML 代码

<section class="teams">
            <article>
                <h1 class="team-names" id="ageGroup"></h1>
                <div class="team-line"></div>
                <img class="team-image" id="teamImage">

            </article>
</section>

Answer 1

除非您事先知道结果中有多少项，否则在循环内动态创建新元素，然后将数据库中的数据插入 HTML。

不要使用 ID - 这些只能用于绝对唯一的元素，而不是重复的元素。

对于每个项目的<article>，其中所有文章的父级是.teams，请执行以下操作：

const teams = document.querySelector('.teams');

querySnapshot.forEach((doc) => {
    const docData = doc.data();
    const article = teams.appendChild(document.createElement('article'));
    article.innerHTML = `
        <h1 class="team-names"></h1>
        <div class="team-line"></div>
        <img class="team-image">
    `;
    article.children[0].textContent = docData.ageGroup;
    article.children[2].src = docData.teamImage;
});