如何显示 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) {&nbsp; var newPlayer = data.val();&nbsp; var p = document.getElementById('p');&nbsp; var span = document.createElement('span');&nbsp; span.innerText = newPlayer.hertext&nbsp; p.appendChild(span);});现在您可以对元素span下的每个元素应用单独的 CSS 样式id。如果你想在数据库中存储多个值，你需要添加它的push()方法而不是set()：text.push({&nbsp; &nbsp; hertext: newPost&nbsp;&nbsp;})这会在其下生成一个新的所谓的推送 ID，/text然后在其中存储您的新结构。我已经删除了Post包装纸，因为我认为可能不再需要它了。