如何使用JavaScript注入HTML

Question

解决方案有人问我的问题，他们对HTML和JavaScript的了解很少，对此我深表歉意。 有了更多的经验，我可以清楚地看到这不是一个好问题，无论如何，我自己的问题的解决方案可以在这里找到： 使用javascript注入html的最佳方法 。

问题：我试图用HTML显示整个列表。 例如，如果有三个名称，我希望在<td>...</td>之间显示这些名称。 有没有办法通过JavaScript将所有这些列表提取到HTML？

我知道我需要一个数组，可能需要for循环。 也许我觉得太复杂了。

这是HTML代码：

<table class = "table table-striped">
   <thead>
      <tr>
        <th>Full Name</th>
      </tr>
   </thead>
   <tbody>
      <tr id = "scoreList">
      <tr>....</tr>
      </tr>
   </tbody>
</table>

这是JavaScript代码：

// Loop through customers
for( var i = 0; i < keys.length; i++){
    var k = keys[i]; 
   // var id = customers[k].id;
    var name = customers[k].name;

    // Add code here to show list of names in html 
}

Answer 1

假设您不使用任何框架，那是一种简单的方法：

// Generate the <td>'s.
const rendered = keys.map((v) => `<td>${v}</td>`).join('');
// Write them on the screen.
document.getElementById('scoreList').getElementsByTag('tr')[0].innerHTML = rendered;

Answer 2

使用纯JavaScript（并假设您要在<tr>元素中使用<td> <tr>元素），可以使用此功能。

 var customers = [ { firstName: 'John', lastName: 'Smith' }, { firstName: 'William', lastName: 'Shakespear' } ] for(var customer of customers) { var tdFN = document.createElement('TD'); tdFN.innerHTML = customer.firstName; var tdLN = document.createElement('TD'); tdLN.innerHTML = customer.lastName; var tr = document.createElement('TR'); tr.appendChild(tdFN); tr.appendChild(tdLN); document.querySelector('table.table.table-striped tbody').appendChild(tr); } 

 <table class="table table-striped"> <thead> <tr> <th>Full Name</th> </tr> </thead> <tbody> <tr id="scoreList"> </tr> </tbody> </table>