HTMLTableElement.insertRow()

The HTMLTableElement.insertRow() method inserts a new row (<tr>) in a given <table>, and returns a reference to the new row.

If a table has multiple <tbody> elements, by default, the new row is inserted into the last <tbody>. To insert the row into a specific <tbody>:

let specific_tbody = document.getElementById(tbody_id);
let row = specific_tbody.insertRow(index)

Syntax

var newRow = HTMLTableElement.insertRow(index);

HTMLTableElement is a reference to an HTML <table> element.

Parameters

index Optional

The row index of the new row. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Return value

newRow is an HTMLTableRowElement that references the new row.

Example

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. (To be valid HTML, a <tr> must have at least one <td> element.) Finally, we add some text to the cell using Document.createTextNode() and Node.appendChild().

HTML

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

JavaScript

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');

Result

Specifications

Browser compatibility

See also

• HTMLTableRowElement.insertCell()
• The HTML element representing rows: HTMLTableRowElement