HTMLTableRowElement.insertCell()

The HTMLTableRowElement.insertCell() method inserts a new cell (<td>) into a table row (<tr>) and returns a reference to the cell.

Syntax

var newCell = HTMLTableRowElement.insertCell(index);

HTMLTableRowElement is a reference to an HTML <tr> element.

Parameters

index Optional

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

Return value

An HTMLTableCellElement that references the new cell.

Exceptions

IndexSizeError DOMException

Thrown if index is greater than the number of cells.

Example

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

We then use insertCell(0) 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

• HTMLTableElement.insertRow()
• The HTML element representing cells: HTMLTableCellElement