HTMLTableElement: insertRow() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

Learn more
See full compatibility

The insertRow() method of the HTMLTableElement interface creates a <tr> element, inserts it at the specified position in the rows collection, and returns it. If the rows collection is empty and the table also has no <tbody> elements, a <tbody> element is first created and inserted.

This method creates and inserts the element directly, without requiring separate calls to methods such as Document.createElement(), Node.insertBefore(), and Node.appendChild().

To explicitly insert a row into a specific section, use HTMLTableSectionElement.insertRow().

Syntax

insertRow()
insertRow(index)

Parameters

index Optional

The index of the new row in the rows collection. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is omitted, it defaults to -1.

If rows is empty, the new row is appended to the last <tbody> element (one is created if there's none). Otherwise, the new row is inserted immediately before the row at index, or appended to the parent of the last row if the new row is to become the last row. The new row is inserted into the same parent as the reference row, so it can be inserted directly into the <table> or into any table sectioning element (<thead>, <tbody>, or <tfoot>).

Return value

An HTMLTableRowElement that references the new row.

Exceptions

IndexSizeError DOMException: Thrown if index is greater than the number of rows or smaller than -1.

Examples

This example uses insertRow(-1) to append a new row to a table.

We then use HTMLTableRowElement.insertCell() to insert a new cell in the new row. Finally, we add some text to the cell using Document.createTextNode() and Node.appendChild().

HTML

html

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

JavaScript

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

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

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

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

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