Добавить кнопку к динамически создаваемой таблице из базы данных реального времени firebase

Question

Мне нужно добавить кнопку в динамически созданную таблицу с использованием базы данных Firebase в реальном времени.

Я пытался сделать это с помощью приведенного ниже фрагмента кода.

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

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

   tr.appendChild(createElementWithText('td', userName));
   tr.appendChild(createElementWithText('td', userEmail));
   tr.appendChild(createElementWithText('td', userPassword));
   tr.appendChild(createElementWithText('td',createElementWithText('button', input.innerHTML = 'type="button" class="abc" onclick="userAction()"')));
   appendingTo.appendChild(tr);

    }

Вот мой полный код,

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

  var appendingTo = document.getElementById("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;

  function userAction(){

  }

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

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

   tr.appendChild(createElementWithText('td', userName));
   tr.appendChild(createElementWithText('td', userEmail));
   tr.appendChild(createElementWithText('td', userPassword));
   tr.appendChild(createElementWithText('td',createElementWithText('button', button.innerHTML = 'type="button" class="abc" onclick="userAction()"')));
   appendingTo.appendChild(tr);

    }

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

 } 

Но вывод, показанный в последнем td, равен [object HTMLInputElement].

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

Answer 1

const createElementWithText = (tag, text) => {
  let elm = document.createElement(tag);
  if (text instanceof HTMLElement) {
    elm.appendChild(text);
  } else {
  elm.textContent = text;
  }
  return elm;
};

document.addEventListener('DOMContentLoaded', () => {
  let appendingTo = document.querySelector('table');
  let tr = document.createElement('tr');
  let td = document.createElement('td');
  let input = document.createElement('input');
  input.type = 'button';
  input.class = 'abc';
  input.value = 'click me';
  
  // changed to strings for now as I dont have full code.
  tr.appendChild(createElementWithText('td', 'userName'));
  tr.appendChild(createElementWithText('td', 'userEmail'));
  tr.appendChild(createElementWithText('td', 'userPassword'));

  tr.appendChild(createElementWithText('td', input));
  appendingTo.appendChild(tr);

});

<table></table>

Answer 2

function createElementWithText(tag, text, attributeObj = []) {
    var elm = document.createElement(tag);
    if (Object.keys(attributeObj).length > 0) {
        for (var key in attributeObj) {
            (key == 'className')
                elm.className = attributeObj[key];
            (key == 'type')
                elm.type = attributeObj[key];
        }
    }
    elm.append(text);

    return elm;
}

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

var attributeObj = [];
attributeObj['type'] = 'button';
attributeObj['className'] = 'abc';
attributeObj['id'] = 'test';

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

Answer 3

Ваша функция возвращает массив. Попробуйте использовать оператор распространения как это

tr.appendChild (... createElementWithText ('td', userName));

Или

tr.appendChild (createElementWithText ('td', userName) [0]);