HTMLTableElement: insertRow() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
indexOptional-
The index of the new row in the
rowscollection. Ifindexis-1or equal to the number of rows, the row is appended as the last row. Ifindexis omitted, it defaults to-1.If
rowsis 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 atindex, 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
IndexSizeErrorDOMException-
Thrown if
indexis 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
<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");
Result
Specifications
| Specification |
|---|
| HTML # dom-table-insertrow-dev |