如何使用 javascript 将检索到的 firebase 数据设置到 div 中

Question

我想将数据放入我已经从 firebase 检索到的 div 中。这是我的 JavaScript 代码：

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

rootRef.on("child_added", snap => {

    alert(snap.val());

    var image = snap.child("image").val();

    var desp = snap.child("description").val();

    $("#product_section").append();

});

我应该在附加括号中写入什么以将数据显示为以下格式的 html 代码：

<div id="product_section" class="container">

        <div class="row">

          <div class="col-md-6 col-sm-6 productDetails">

            <p>Something from description field of Firebase 1 </p>

          </div>

          <div class="col-md-6 col-sm-6">

            <img src="image src form Firebase">

          </div>

        </div>

        <div class="row">

          <div class="col-md-6 col-sm-6 productDetails">

            <p>Something from description field of Firebase 2 </p>

          </div>

          <div class="col-md-6 col-sm-6">

            <img src="image src form Firebase">

          </div>

        </div>

</div>

我想分别在“<img>”和“<p>”之间显示图像和描述字段。

Answer 1

看来你的工作快完成了。要将 html 标签放入 div，请使用 $("#product_section").append(); 需要一个字符串作为输入，其中包含相应的结构，如下所示：var image_and_desp_string =&nbsp;&nbsp; &nbsp;'<div class="row">'&nbsp; &nbsp; &nbsp;+ '<div class="col-md-6 col-sm-6 productDetails">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '<p>' + desp + '</p>'&nbsp; &nbsp; &nbsp;+ '</div>'&nbsp; &nbsp; &nbsp;+ '<div class="col-md-6 col-sm-6">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '<img src="' + image + '">'&nbsp; &nbsp; &nbsp;+ '</div>'&nbsp;+ '</div>';$("#product_section").append(image_and_desp_string);我尝试将代码与 html 标签对齐，以便更容易比较。