追加的HTML表仅显示第一个元素

Question

我正在尝试将Firebase实时数据库中的数据附加到HTML表。但是它仅出现在附加表中的第一个<td>元素中。

这是我的代码段。

var dbRefUsers = firebase.database().ref().child('Web App').child('Users');

  var appendingTo = document.getElementById("userlist"); //id of the tbody = "userlist"

dbRefUsers.on('child_added', gotNewChild, errData); 


function gotNewChild(userSnapshot){  



  var user = userSnapshot.val();

  var userName = user.Name;
  var userEmail = user.Email;
  var userPassword = user.Password;

  var tr = document.createElement('tr');



   function createElementWithText(tag, text) {
    var elm = document.createElement(tag);
    elm.textContent = text;
    return elm;
    }



   var tr = document.createElement('tr');


   tr.appendChild(createElementWithText('td', userName));
   tr.appendChild(createElementWithText('td', userEmail));
   tr.appendChild(createElementWithText('td', userPassword));
   appendingTo.appendChild(tr);

    }


 function errData(error){
    console.log("Error!")
    console.log(error);

 }

刷新页面后，所有<td>元素均正确显示。但是在将新的子级插入数据库时​​，并没有及时显示所有三个元素（userName，userEmail和userPassword）真实。

有人可以帮助我解决我的问题吗？