Javascript 如何从Firebase检索多条数据并将其附加到不同的<；部门>；那会做同样的事情吗？

所以我制作了一个页面来显示从表单输入的数据，并使用Firebase附加到另一个页面。我基本上已经完成了设置，所以有一个表单可以使用函数保存消息并查询到Firebase，然后在另一个页面上显示。到目前为止，我已经制作了一张卡片，它工作得很好，但每当我在表单上再次添加数据时，它只是并排粘在一起，然后制作一个新的卡片容器。以下是一些图片：

当我再次填写表格时，结果是这样的：

如您所见，它从“随机UHC”（这是Firebase中的第一个事件）变为“随机UHCRandom事件”。我一直在尝试设置它，这样它就可以单独制作一个完整的新卡容器，而不仅仅是使用同一张卡。这里还有一些代码： 在Firebase中查询数据的窗体

var messagesRef = firebase.database().ref().child('messages');

// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var name = getInputVal('name');
  var company = getInputVal('eventTitle');
  var email = getInputVal('date');
  var phone = getInputVal('time');
  var message = getInputVal('message');

  // Save message
  saveMessage(name, company, email, phone, message);

  // Show alert
  document.querySelector('.alert').style.display = 'block';

  // Hide alert after 3 seconds
  setTimeout(function(){
    document.querySelector('.alert').style.display = 'none';
  },3000);

  // Clear form
  document.getElementById('contactForm').reset();
}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(name, eventTitle, date, time, message){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
    name: name,
    eventTitle:eventTitle,
    date:date,
    time:time,
    message:message
  });
}

如何在新页面上输出它：

rootRef.on("child_added", snap => {
    
    var name = snap.child("name").val();
    var eventTitle = snap.child("eventTitle").val();
    
    $("#eventTitle").append(eventTitle);

});

显示数据的页面的HTML：

    <div class="card-main">
      <div class="card-head">
        <img src="logo.png" alt="logo" class="card-logo">
        <div class="product-detail">
          <h2>Upcoming Events</h2> 
        </div>
      </div>
      <div class="card-body-1">
        <div class="product-desc">
          <span class="product-title">
                <b><p id = eventTitle style="width:18%; float: left;"></p></b>
                  <span class="badge">
                    New
                  </span>
                  <span class="product-caption">
                    <b>July 5th, 2020 - 
                    5:30 PM EST</b>
                  </span>
          </span>

即将举行的活动

新的
2020年7月5日-
美国东部时间下午5:30

---

id元素eventTitle是当前页面上显示的唯一内容。非常感谢您的帮助。

请注意：这个答案来源于，为了让它更快，我认为您要寻找的具体细节从8到10分钟之间开始。我绝对建议你去看他的视频，因为他把一切都说得很清楚，解释得也很好。这将是我最好的答案，但我试图在下面解释如何做到这一点的最基本形式

一般来说，您需要确保客户端javascript为数据库中的每个“条目”或卡片创建新元素。您可以通过实现这样的操作来实现这一点，该操作为数据库中的每个文档或文档填充一张新卡

data.forEach(doc => {

})

然后在Javascript中为每个文档编写HTML模板，然后使用传入firebase数据或变量。下面的例子

data.forEach(doc => {
    // This is simply fetching your doc data and passing that into a constant
    const card = doc.data(); 
    const div = '
        // Put Your HTML used for making the template of the card in here
        // Pass in data to be populated on your card like in the example displayed below   
        <b><p style="width:18%; float: left;">${card.EventTitle}</p></b>
    ';
    html += div
});
eventCards.innerHTML = html;

data.forEach（doc=>{
//这只是获取文档数据并将其传递到常量中
常数卡=单据数据（）；
康斯特分区
//将用于制作卡片模板的HTML放在这里
//传入要在卡上填充的数据，如下面显示的示例所示
${card.EventTitle}
';
html+=div
});
eventCards.innerHTML=html；

这个系统应该能够实现你所期待的。我可能没有解释的最好，但如果有什么不工作或你有进一步的问题，你可以参考前面提到的视频或评论。如果有人有办法改进这个答案，请让我知道