バニラJavaScriptとFirebaseを使ってliをulに正しく追加する方法は？

Question

私はfirebaseデータベースコンソールですべてのメッセージを取得したいと思います。私のコードは普通のJavaScriptです。私のコードで

HTML

<ul class="collection" id="chatList"></ul> 

JS

var databaseRef = firebase.database().ref('messages'); 
var chatList = document.getElementById('chatList'); 
databaseRef.on('value', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     chatList.appendChild('<li class="collection-repeat">' + childSnapshot.val().message + '</li>'); 
    }) 
}); 

私はそれはまた、他を追加すると思いますので、私は、データベース内の最後の値を取得します<li>で生成されていますforeachの側に。

<li>を追加する適切な方法は、もう1つの<li>も追加しないようにすることです。私はjQueryのでは、それは次のように達成することができることを知っている

：

$('#chatList').append('<li class="collection-repeat">' + childSnapshot.val().message + '</li>') 

任意の助けもいただければ幸いです。

Answer 1

appendChild()は、要素にnodeを追加するために使用されます。しかし、あなたはstringを追加しようとしています。

var databaseRef = firebase.database().ref('messages'); 
var chatList = document.getElementById('chatList'); 
databaseRef.on('value', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     var node = document.createElement("li"); 
     node.className="collection-repeat"; 
     var textnode = document.createTextNode(childSnapshot.val().message); 
     node.appendChild(textnode); 
     chatList.appendChild(node); 
    }) 
});