Javascript 在容器中为每个Firebase条目填充一个条目

我正在使用Firebase存储用户信息，我想用每个用户信息填充div，以便可以接受或删除（但不能从Firebase中删除）

所以我希望它的结构是这样的：

---------------------- 
Name 
Email 
Date
---------------------- 
Name 
Email 
Date
---------------------- 
and so on....

我现在得到的是这样的东西：

---------------------- 
Name 
Email 
Date
---------------------- 
Name 
Email 
Date
---------------------- 
and so on....

根据Firebase中的数据量和具体内容的格式，生成div的正确方法是什么

HTML:

<div>Some entry here
    <h4 id="name"></h4>
    <h4 id="date"></h4>
    <h6 id="email"></h6>
    <button id="0" class="remove">Remove</button>
  </div>
  <div>Another entry here
    <button id="1" class="remove">Remove</button>
  </div>

var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');
    $('#name').append(name);
    $('#email').append(email);
    $('#date').append(date);
  });
});

---

对于每个子元素，都将值附加到相同的HTML元素（即，所有名称都附加到id为“name”的h4元素，所有电子邮件都附加到id为“email”的元素，依此类推）

因此，它们通常显示在一行（一行）上

您必须为每个子项（及其一组值）创建一个新的占位符。您可以通过一张桌子来实现这一点，例如：

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];


var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    // Insert a row in the table at the last row
    var newRow = tableRef.insertRow(tableRef.rows.length);
    // Insert a cell in the row at index 0
    var newCell = newRow.insertCell(0);
    // Append a text node to the cell with name value
    var newText = document.createTextNode(name);  // <-- name value from the child
    newCell.appendChild(newText);

    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(email);  // <-- email value from the child
    newCell.appendChild(newText);

    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(date);  // <-- date value from the child
    newCell.appendChild(newText);

  });
});

---

最后，请注意，您还可以使用一些MVVMJavaScript框架，如vue.js、knockout.js以及angular、react。。。为了方便地在HTML DOM中反映查询结果到后端（反之亦然）

var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    element = document.createElement("div");
    element.appendChild(document.createTextNode(name));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(email));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(date));
    document.getElementById('parentDiv').appendChild(element);   
    //You could add a specific css class to this div to generate the bottom border   

  });
});