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

我一直在尝试开发一个网络博客应用程序，人们可以在这里上传不同的博客，也可以阅读其他人上传的博客。我能够在 firebase 实时数据库上成功上传数据，但在尝试从 firebase 检索数据时遇到问题。我有一张来自 google material library 的卡片，我希望标题和 desc 显示在下面。但是每当我尝试检索数据时，只会显示最后一个节点的数据。下面是我的 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);
});

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

这是我检索到的数据的样子在此处输入图像描述仅检索一个节点