如何从firebase数据库中获取值p元素

Question

我正在尝试使用firebase数据库创建聊天应用。 我有html：

<input type="text" name="txt" id="txt">
<button type="submit" id="btn-send" onclick="addElement()">SEND</button>
<p id="list-message"></p>

和javascript：

var rootRef = firebase.database();
var message = rootRef.ref().child('/message');

function addElement() {
    var x = document.getElementById('txt').value;
    var node = document.createElement("li");
    var text = document.createTextNode(x);

    node.appendChild(text);
    document.getElementById('list-message').appendChild(node);
    message.push().set({
        Message: $("#txt").val()
    });
}

我的Firebase数据的屏幕截图

如何检索所有数据并在<p id="list-message"></p>中显示为列表？

Answer 1

添加一个数据侦听器，用于查找message节点中的更改，然后更新<p id="list-message"></p>。

message.on('child_added', function(snapshot) {
  var msg = snapshot.val();
  var msgDiv = document.createElement("div");
  msgDiv.textContent = msg.Message;
  document.getElementById("list-message").appendChild(msgDiv);
});

有关如何构建聊天应用的更多信息，请参阅此codelab：https://codelabs.developers.google.com/codelabs/cloud-firebase-chat/。