Javascript 向动态创建的表行添加按钮

因此，我试图将此按钮添加到动态创建的表行中。但我真的不知道该怎么做。代码是一团乱，因为我尝试了很多东西来让它运行

我需要将这个按钮（元素）附加到调用函数的表行中，是否有聪明的方法可以做到这一点。如果我改变桌子的结构，没关系

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);

}

函数getPerson（）{ //addButton.value=“+”； //addButton.class=“btn btn成功”； $（“#输出1 t车身tr”）.remove（）； 获取（url） .then（res=>res.json（）） 。然后（数据=>{ 控制台日志（数据）； var temp=“”； data.forEach（（个人）=>{ 温度+=”； 临时工+=“”+人员id+“”； console.log（person.id）； 临时工+=“”+个人姓名+“”； temp+=“”+个人名称+“”； 温度+=“” person.projectList.forEach（（项目）=>{ temp+=项目名称+“
”； }); 温度+=“” 温度+=“” person.technoList.forEach（（techno）=>{ 温度+=技术名称+“
”； }); 温度+=“” temp+=“”+addButton（person.id）+“” //this.parentElement.appendChild（this） x++； //document.getElementById（'personDetail_按钮'）。addEventListener（'click'，this.personDetail（person.id））； 温度+=“” }); document.getElementById（“tableOutput”）.innerHTML=temp； }); } 功能添加按钮（人员id）{ var person\u id\u onclick=person\u id var元素=document.createElement（“输入”）； element.type='button'； element.value='test123'； element.onclick=function（）{ personDetail（person\u id\u onclick）； } $（元素）.addClass（'btn btn primary'）； //$（this.appendChild（元素）； document.body.appendChild（元素）； }

身份证件
沃名称
姓氏
项目
技术员
按钮

您可以尝试替换

document.body.appendChild（元素）带有
返回元素我还更新了函数以删除随机jquery类


功能添加按钮（个人id）{
var元素=document.createElement（“输入”）；
element.type='button'；
element.value='test123'；
元素setAttribute（“数据-个人id”，个人id）；
setAttribute（“类”，“btn视图详细信息btn主”）；
var_wrap=document.createElement（“div”）；
_wrap.appendChild（元素）；
返回_wrap.innerHTML；
}
var_btns=document.queryselectoral（“.btn viewdetail”）；
_btns.forEach（功能（el）{
el.addEventListener（“点击”，函数（evt）{
personDetail（evt.target.getAttribute（“数据个人id”）；
});
});
document.body.innerHTML+=addButton（4）
在动态创建的行中，addbutton（person.id）调用没有附加任何内容。我也会这样做，为什么你要在同一行的addbutton id中添加“x”，使用person.id，因为它已经存在，并且是唯一的。这很有效！但现在我坚持使用这个“[object HTMLInputElement]”。因为它没有父元素，所以我不能附加子元素。@Gerrit我更新了代码，所以它创建了一个div，元素被附加到该div，然后返回该div的innerhtml。这也奏效了。但是有了这个改变，onClick功能就可以被触发了。对这个问题有什么想法吗？@Gerrit我忘了在事件处理程序中添加顺序错误。我已经更新了我的代码，删除了你的点击处理程序，并将其替换为底部的单个处理程序，该处理程序将获得一个带有person ID的数据属性，该ID也添加到了我的更新函数中。我刚刚测试了你的代码。querySelector会选择您的测试按钮，但不会选择我动态创建的按钮。查询选择器位于js文件的末尾。我已经在JSFIDLE中发布了我的代码。如果你能再看一眼，我会很高兴的。
<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>