javascript - 无法将数据从Firebase实时数据库检索到Web应用程序

我一直在尝试开发一个Web博客应用程序，人们可以在该应用程序中上传不同的博客，也可以阅读其他人上传的博客。我能够成功将数据上传到Firebase实时数据库中，但是在尝试从Firebase检索数据时遇到了问题。我有一张来自Google材料库的卡片，并且希望标题和说明显示在下面。但是，每当我尝试检索数据时，只会显示来自最后一个节点的数据。下面是我的html和javascript代码。

HTML代码：

<div class="w">
            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text" id="descPost">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="post.html">
      Get Started
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>
     </div>

JavaScript代码：

var rootRef = firebase.database().ref().child("posts");

rootRef.on("child_added",snap =>{
    var title = snap.child("Title").val();
        var desc = snap.child("desc").val();


        $("#titlePost").text(title);
        $("#descPost").text(desc);
});

下面是我的数据库的图片。

这是我检索到的数据的样子
enter image description here
仅检索到一个节点

最佳答案

将您的帖子放在列表中，这样一个新的孩子就不会替换您的旧孩子，如果它在列表中，只会扩展该列表。在这种情况下，您的父母是
“ ul”被称为“ blog-posts”，您将像下面的示例一样将孩子添加到此列表。您的孩子将展开此列表，并且不会互相覆盖

<body>
<div>
    <ul class="blog-posts">
        <li>
            <!--Your Posts are here-->
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
            </div>
            <div class="mdl-card__supporting-text" id="descPost">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris sagittis pellentesque lacus eleifend lacinia...
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </li>
    </ul>
</div>

parent.append(`
    <li>
    <div class="w">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text" id="${key}">${title}</h2>
      </div>
      <div class="mdl-card__supporting-text" id="descPost">
        ${desc}
      </div>
    </div>
    <li/>`
);