如何使用 vanilla 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);
    })
});