然后，我们使用 HTMLTableRowElement.insertCell() 在新行中插入新单元格。（要使 HTML 有效，<tr> 必须至少包含一个 <td> 元素。）最后，我们使用 Document.createTextNode() 和 Node.appendChild() 将一些文本添加到单元格中。

<table id="my-table">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

JavaScript

**注意：**insertRow() 将行直接插入到表格中。无需像使用 Document.createElement() 创建新的 <tr> 元素那样单独附加该行。

function addRow(tableID) {
  // Get a reference to the table
  let tableRef = document.getElementById(tableID);

  // Insert a row at the end of the table
  let newRow = tableRef.insertRow(-1);

  // Insert a cell in the row at index 0
  let newCell = newRow.insertCell(0);

  // Append a text node to the cell
  let newText = document.createTextNode("New bottom row");
  newCell.appendChild(newText);
}

// Call addRow() with the table's ID
addRow("my-table");

html

规范

结果
规范 # HTML 标准

浏览器兼容性

dom-table-insertrow-dev

HTMLTableElement 是对 HTML <table> 元素的引用。

引用新行的 HTMLTableRowElement。

`HTMLTableElement` 是对 HTML `<table>` 元素的引用。

引用新行的 `HTMLTableRowElement`。