如何使用香草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>');
  })
});

使用我的代碼，我只能得到數據庫中的最后一個值，因為我猜它還會附加在foreach內部生成的另一個<li> 。

什么是追加<li>的正確方法，以便它也不會追加其他<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);
    })
});