如何显示 firebase 数据库中的所有值并用 CSS 边框分隔每个值？

Question

我想知道如何返回每个 firebase 值，每个值都在 CSS 边框内。所以我有连接代码和一切。但我想获取“Post”中的所有值。看一下代码：var text = firebase.database().ref("text/");function post(){var newPost = document.getElementById('newPost').value;var p = document.getElementById('p');p.innerHTML = newPost;      text.set ({   Post: {     hertext: newPost        }       });}text.on("child_added", function(data, prevChildKey) {  var newPlayer = data.val();var p = document.getElementById('p');p.innerHTML = newPlayer.hertext;});<textarea id = "newPost"></textarea><button onclick = "post();">Post</button><p id = "p"></p>但是我如何将不止一个值放入数据库中呢？使用我现在的代码，最新的值只是替换了它之前的值。我如何制作它才能制作并显示项目列表，而不仅仅是最后添加的项目？一旦它们都显示在屏幕上，有什么办法可以让每个值单独显示并在其周围加上 CSS 边框？我在这里先向您的帮助表示感谢！

Answer 1

如果您想对Post数据库中的每个节点应用单独的 CSS 样式，则需要确保每个节点都Post以 HTML 中的单独元素结束。

最简单的方法是生成一个新的 HTML 元素，每次child_added都会触发：

text.on("child_added", function(data, prevChildKey) {

  var newPlayer = data.val();

  var p = document.getElementById('p');

  var span = document.createElement('span');

  span.innerText = newPlayer.hertext

  p.appendChild(span);

});

现在您可以对元素span下的每个元素应用单独的 CSS 样式id。

如果你想在数据库中存储多个值，你需要添加它的push()方法而不是set()：

text.push({

    hertext: newPost  

})

这会在其下生成一个新的所谓的推送 ID，/text然后在其中存储您的新结构。我已经删除了Post包装纸，因为我认为可能不再需要它了。