В добавленной таблице HTML появляются только первый элемент <td>

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) очень своевременно при вставке нового дочернего элемента в базу данных.

Может ли кто-нибудь помочь мне с моей проблемой?