Javascript 按钮未按预期渲染

我正在单击HTML中的一个按钮，希望创建一个表，根据for循环的不同，表中的行数为X，然后在每行的末尾创建一个按钮

我希望输出如下所示：

<table>
 <tr>
  <td> first element </td>
  <button> </button>
 </tr>
 <tr>
  <td> first element </td>
  <button> </button>
 </tr>
</table>

第一要素
第一要素

但是，由于某些原因，按钮不会在第一行渲染：

  <table>
     <tr>
      <td> first element </td>
     </tr>
     <tr>
      <td> first element </td>
      <button> </button>
     </tr>
    </table>

第一要素
第一要素

这是我正在使用的代码：

function makeHTMLMatchesTable(array){
  var table = document.createElement('table');
  var button = document.createElement('button');
  button.setAttribute("id", "unMatchButton");
  console.log(array.length, 'ARRAY');
    for (var i = 0; i < array.length; i++) {
      console.log(array[i], 'ai');
      var row = document.createElement('tr');
      var cell = document.createElement('td');
      cell.textContent = array[i];
      row.appendChild(cell);
      row.appendChild(button);
      table.appendChild(row);
    }
    return table;
}

函数makeHTMLMatchesTable（数组）{
var table=document.createElement（'table'）；
var button=document.createElement（'button'）；
setAttribute（“id”，“unMatchButton”）；
log（array.length，'array'）；
对于（var i=0；i

我希望输出像这样

您引用的结构无效。您不能将

按钮

作为

tr

的直接子项。从中，可以位于

tr

元素中的只有

td

、

th

或脚本支持元素

但是，由于某些原因，按钮不会在第一行渲染：

  <table>
     <tr>
      <td> first element </td>
     </tr>
     <tr>
      <td> first element </td>
      <button> </button>
     </tr>
    </table>

因为您只创建了一个

按钮

元素，然后将其附加到两个单独的行中。附加它不会克隆它，它会将它从旧的父级（如果有）移动到新的父级

要解决此问题，请执行以下操作：

每次需要新按钮时，创建一个新的

按钮

（具有新的

id

；

id

值在文档中必须是唯一的）

将

按钮

附加到

td

，而不是

tr

例如：

函数makeHTMLMatchesTable（数组）{
var table=document.createElement（'table'）；
对于（var i=0；i);您需要为每行创建一个新按钮

function makeHTMLMatchesTable(array){
  var table = document.createElement('table');
  console.log(array.length, 'ARRAY');
  for (var i = 0; i < array.length; i++) {
    console.log(array[i], 'ai');
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.textContent = array[i];
    var button = document.createElement('button');
    button.setAttribute("id", "unMatchButton");
    row.appendChild(cell);
    row.appendChild(button);
    table.appendChild(row);
 }

return table;

函数makeHTMLMatchesTable（数组）{
var table=document.createElement（'table'）；
log（array.length，'array'）；
对于（var i=0；i

}