Web/API/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)

Note: insertRow() inserts the row directly into the table. The row does not need to be appended separately as would be the case if Document.createElement() had been used to create the new <tr> element.

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

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLTableElement.insertRow()' in that specification.	Living Standard
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLTableElement.insertRow()' in that specification.	Obsolete	Specifies in more detail where the row is inserted.
Document Object Model (DOM) Level 1 SpecificationThe definition of 'HTMLTableElement.insertRow()' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`insertRow`	Chrome Full support 4	Edge Full support 12	Firefox Full support 3 Notes' Full support 3 Notes' Notes' Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.	IE Full support 5.5	Opera Full support 10	Safari Full support 4	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.	Opera Android Full support 10.1	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.': See implementation notes.