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

Question

, поэтому я пытаюсь добавить эту кнопку в динамически создаваемую строку таблицы. Но я, честно говоря, не знаю, как заставить это работать. Код представляет собой беспорядок, потому что я пробую так много всего, чтобы добиться этого.

Мне нужно добавить эту кнопку (элемент) в строку таблицы, где вызывается функция, есть ли какой-нибудь разумный способ сделай это. Если я изменю структуру таблицы, ничего страшного.

function getPerson(){
//addButton.value = "+";
//addButton.class = "btn btn-success";
$("#output1 tbody tr").remove();
fetch(url)
    .then(res => res.json())
    .then(data => {

        console.log(data);

        var temp = "";
        data.forEach((person) => {
            temp += "<tr>";
            temp += "<td>" +person.id+"</td>";
            console.log(person.id);
            temp += "<td>" +person.vorname+"</td>";
            temp += "<td>" +person.nachname+"</td>";
            temp += "<td>"
            person.projectList.forEach((project) => {
              temp += project.name+"<br>";
            });
            temp += "</td>"

            temp += "<td>"
            person.technoList.forEach((techno) => {
              temp += techno.name+"<br>";
            });
            temp += "</td>"




            temp += "<td id='addButton" + x + "' >" + addButton(person.id)+ "</td>"
             //this.parentElement.appendChild(this)
             x++;


            //document.getElementById('personDetail_Button').addEventListener('click', this.personDetail(person.id));
            temp += "</tr>"


        });

        document.getElementById("tableOutput").innerHTML= temp;

    });
}

function addButton(person_id){
  var person_id_onclick = person_id
  var element = document.createElement("input");
  element.type = 'button';
  element.value = 'test123';
  element.onclick = function(){
    personDetail(person_id_onclick);
  }
  $(element).addClass('btn btn-primary');
  //$(this).appendChild(element);
  document.body.appendChild(element);

}

<table class="table" id="output1">
        <thead class="thead-dark">
            <tr>
                <th scope="">ID</th>
                <th scope="col">Vorname</th>
                <th scope="col">Nachname</th>
                <th scope="col">Projekte</th>
                <th scope="col">Technologien</th>
                <th scope="col">Button</th>
            </tr>
        </thead>
        <tbody id="tableOutput">

        </tbody>

    </table>

Answer 1

Вы можете попробовать заменить document.body.appendChild(element); на return element; Я также обновил функцию, чтобы удалить случайный класс jquery.

function addButton(person_id){
  var element = document.createElement("input");
  element.type = 'button';
  element.value = 'test123';
  element.setAttribute("data-person_id",person_id);
  element.setAttribute("class","btn-viewdetail btn btn-primary");
  
  var _wrap = document.createElement("div");
  _wrap.appendChild(element);

 return _wrap.innerHTML;

}

var _btns = document.querySelectorAll(".btn-viewdetail");
_btns.forEach(function(el){
  el.addEventListener("click",function(evt){
    personDetail(evt.target.getAttribute("data-person_id"));
  });
});

document.body.innerHTML += addButton(4);