Add a button dynamically in a HTML table row using vanilla javascript

Question

I am receiving JSON data from an API and I am populating this data into an HTML table using vanilla javascript. I am trying to add a button dynamically to the end of each row to perform some functionality, I haven't found a way to do it. Here is my function that populates the table with data

const showArtist = (data) => {
  let tableStructure = `<table>
        <thead>
          <tr>
           <th>Sr#</th>
           <th>Name</th>
           <th>Country</th>
           <th>Disambiguation</th>
           <th>Info</th>
          </tr>
        </thead>
          <tbody id="tbody"></tbody>
        </table>
      `;
  artistTable.innerHTML = tableStructure;
  let tableBody = document.getElementById("tbody");
  for (let i = 0; i < Object.keys(data).length; i++) {
    let tr = "";

    tr += `<tr>
            <td>${i}</td>
            <td>${data[i].name}</td>
            <td>${data[i].country}</td>
            <td>${data[i].disambiguation}</td>

            <td><input type="button" value="" >Add</input></td>
          </tr>`;
    tableBody.innerHTML += tr;
  }
};

I have tried using the appendChild method but it doesn't work either.

Answer 1

As you comment you don't know how to use appendChild, I leave my answer here.

Example Below

 const artistTable = document.querySelector("#artistTable"); const data = [ { name: "a", country: "bbb", disambiguation: "cc", }, { name: "sss", country: "eeee", disambiguation: "dddddd", }, ]; const showArtist = data => { let tableStructure = `<table> <thead> <tr> <th>Sr#</th> <th>Name</th> <th>Country</th> <th>Disambiguation</th> <th>Info</th> </tr> </thead> <tbody id="tbody"></tbody> </table> `; artistTable.innerHTML = tableStructure; let tableBody = document.getElementById("tbody"); for (let i = 0; i < Object.keys(data).length; i++) { const tr = document.createElement("tr"); tr.innerHTML = `<td>${i}</td> <td>${data[i].name}</td> <td>${data[i].country}</td> <td>${data[i].disambiguation}</td> <td><input type="button" value="" >Add</input></td> `; tableBody.appendChild(tr); } }; showArtist(data);

 <div id="artistTable"></div>

Answer 2

Replace this line:

tableBody.innerHTML += tr;

with

tr = `<tr>
       <td>${i}</td>
       <td>${data[i].name}</td>
       <td>${data[i].country}</td>
       <td>${data[i].disambiguation}</td>
       <td><input type="button" value="" >Add</input></td>
      </tr>`;
const parser = new DOMParser(),
doc = parser.parseFromString(tr, "text/html");
tableBody.appendChild(doc.querySelector('tr'))

This should work.

More cleaner solution is to use combination of document.createElement() , document.cloneNode() and document.appendChild() . Do something like

// Before for loop create tr and td element.
const tr = document.createElement('tr');
const td = document.createElement('td');

// Then inside for loop, Instead of using string definition,

let row = tr.cloneNode(true)
// Repeat these steps to create all <td>:
td1 = td.cloneNode(true);
td1.innerText = i // value
row.appendChld(td1) // Add all td to tr
tbody.appendChild(row)