如何在HTML容器中展示从Firebase获取的数据（新手求助）

先仔细过了一遍你的代码，发现几个关键问题，咱们一个个拆解解决：

1. Firebase初始化&引用错误 #

你写的fiebase.database.ref有两处问题：

• 拼写失误：fiebase → firebase（少了个r）
• 数据库引用的正确写法是firebase.database().ref()，漏了调用database()的括号

2. HTML字符串拼接的语法错误 #

这部分是最容易出问题的地方，你的代码里有几个明显的语法bug：

• <p style='color:grey;&gt; 里的分号位置错了，应该是<p style='color:grey;'>，而且转义的>直接写>就行（用模板字符串的话会更省心）
• 拼接时不该加分号：比如+"Desc: " + mDesc; +"Date" + mTime;里的分号会直接导致语法报错，必须去掉
• 闭合标签写错了：/div> → </div>，漏了左斜杠前面的尖括号

3. DOM选择器错误 #

$("blogs")这个选择器不符合jQuery的规则：如果你的容器是id为blogs的元素，要写$("#blogs")；如果是class类名，就写$(".blogs")，否则jQuery根本找不到对应的DOM元素。

4. 字段对应逻辑问题（可选优化） #

你代码里写的"Date" + mTime; +"time" + mDate明显把时间和日期的变量搞反了，得对应数据库里的date和time字段调整过来。

修正后的完整代码 #

// 修正拼写和数据库引用方式
var dbBlogs = firebase.database().ref("users").child("blogs").orderByChild("time");
dbBlogs.on("value", function(blogs){
  if (blogs.exists()) {
    var container = "";
    blogs.forEach(function(singleBlog){
      var mDesc = singleBlog.val().desc;
      var mTime = singleBlog.val().time;
      var mDate= singleBlog.val().date;
      // 修正HTML拼接的语法错误，拆分结构更易读
      container += "<div class='jumbotron bg-light text-dark border border-dark'>";
      container += "<div class='row'>";
      container += "<div class='col-sm-5'>";
      container += "<p style='color:grey;'>Desc: " + mDesc + "<br>";
      container += "Date: " + mDate + "<br>"; // 修正字段对应关系
      container += "Time: " + mTime + "</p>";
      container += "</div>";
      container += "</div>";
      container += "</div>";
    });
    // 修正DOM选择器，假设你的容器是id为blogs的元素
    $("#blogs").html(container);
  }
});

另外给你个小建议：用ES6的模板字符串来拼接HTML，能避免很多拼接时的语法失误，可读性也强很多，比如：

container += `
<div class='jumbotron bg-light text-dark border border-dark'>
  <div class='row'>
    <div class='col-sm-5'>
      <p style='color:grey;'>
        Desc: ${mDesc}<br>
        Date: ${mDate}<br>
        Time: ${mTime}
      </p>
    </div>
  </div>
</div>
`;

内容的提问来源于stack exchange，提问作者Ron