HTMLTableSectionElement: 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⁩.

TheinsertRow() method of theHTMLTableSectionElement interface inserts a new row(<tr>) in the given table sectioning element (<thead>,<tfoot>, or<tbody>), then returns a reference to this new row.

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

Syntax

insertRow()insertRow(index)

Parameters

indexOptional: The row index of the new row. Ifindex is-1 or equal tothe number of rows, the row is appended as the last row.Ifindex is omitted it defaults to-1.

Return value

AnHTMLTableRowElement that references the new row.

Exceptions

IndexSizeErrorDOMException: Thrown ifindex is greater than the number of rows, or smaller than-1.

Examples

In this example, two buttons allow you to add and remove rows from the table body section; it also updates an<output> element with the number of rows currently in the table.

HTML

html

<table>  <thead>    <tr>      <th>Col 1</th>      <th>Col 2</th>      <th>Col 3</th>    </tr>  </thead>  <tbody>    <tr>      <td>X</td>      <td>Y</td>      <td>Z</td>    </tr>  </tbody></table><button>Add a row</button><button>Remove last row</button><div>This table's body has <output>1</output> row(s).</div>

table {  border-collapse: collapse;}th,td {  border: 1px solid black;}button {  margin: 1em 1em 1em 0;}

JavaScript

// Obtain relevant interface elementsconst bodySection = document.querySelectorAll("tbody")[0];const rows = bodySection.rows; // The collection is live, therefore always up-to-dateconst rowNumberDisplay = document.querySelectorAll("output")[0];const addButton = document.getElementById("add");const removeButton = document.getElementById("remove");function updateRowNumber() {  rowNumberDisplay.textContent = rows.length;}addButton.addEventListener("click", () => {  // Add a new row at the end of the body  const newRow = bodySection.insertRow();  // Add cells inside the new row  ["A", "B", "C"].forEach(    (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),  );  // Update the row counter  updateRowNumber();});removeButton.addEventListener("click", () => {  // Delete the row from the body  bodySection.deleteRow(-1);  // Update the row counter  updateRowNumber();});