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

index is 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 greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Return value

newCell is an HTMLTableCellElement that references the new cell.

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