Добавить в таблицу начальной загрузки, используя JavaScript

Question

Я нашел несколько других постов, которые, похоже, решают эту проблему с помощью jquery, но я хотел бы использовать только javascript.Я хотел бы создать таблицу с помощью начальной загрузки, но не могу понять, как добавить новые данные в таблицу.Он создает заголовок, а затем просто выводит нужные элементы в виде строк под заголовком таблицы.

html

<div id = specificFailureCountTable-js></div>

js

let filterText = 'machines';
let tableData = document.getElementById("specificFailureCountTable-js"); 
let data = [["machineA",15],["machineB",54],["machineC",26]];

//set header of table
tableData.innerHTML = `
<table class="table table-striped" id = "myTable">
  <thead>
    <tr>
      <th scope="col">${filterText}</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
  `;
  //create//append rows
for(i = 0; i < data.length; i++){
    tableData.innerHTML = tableData.innerHTML +
    `<tr>
      <th scope="row">${i}</th>
      <td>${data[i][0]}</td>
      <td>${data[i][1]}</td>
    </tr>`
}
//close off table
tableData.innerHTML = tableData.innerHTML +
  `</tbody>
  </table>`
  ;

Answer 1

Просто используйте переменную, которая определит вашу таблицу, добавьте к этой переменной и в конце, когда она будет готова, присвойте tableData.innerHTML, в противном случае у вас будет сломан DOM (не уверен, что будет выводом, но он может отличаться в зависимости отв браузере):

let filterText = 'machines';
let tableData = document.getElementById("specificFailureCountTable-js"); 
let data = [["machineA",15],["machineB",54],["machineC",26]];

//set header of table
let table = `
<table class="table table-striped" id = "myTable">
  <thead>
    <tr>
      <th scope="col">${filterText}</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
  `;
  //create//append rows
for(i = 0; i < data.length; i++){
    table = table +
    `<tr>
      <th scope="row">${i}</th>
      <td>${data[i][0]}</td>
      <td>${data[i][1]}</td>
    </tr>`
}
//close off table
table = table +
  `</tbody>
  </table>`
  ;

tableData.innerHTML = table;

И еще одно замечание: вы можете использовать table += 'xxx' в качестве ярлыка для table = table + 'xxx'