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：私のFirebaseデータ

の

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() 
    }); 
} 

スクリーンショット

私は<p id="list-message"></p>でリストとしてすべてのデータとショーを取得することができますどのように？

Answer 1

messageノードの変更を調べて、<p id="list-message"></p>を更新するデータリスナーを追加します。 https://codelabs.developers.google.com/codelabs/cloud-firebase-chat/：

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); 
}); 

チャットアプリを構築する方法の詳細については、このコードラボを参照してください。