Web/API/HTMLTableRowElement/insertCell

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

Note: insertCell() inserts the cell directly into the row. The cell does not need to be appended separately with Node.appendChild() as would be the case if Document.createElement() had been used to create the new <td> element.

You can not use insertCell() to create a new <th> element though.

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

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLTableRowElement.insertCell()' in that specification.	Living Standard
Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLTableRowElement.insertCell()' 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
`insertCell`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
Support for `-1` as an index argument	Chrome Full support Yes	Edge Full support 12	Firefox Full support 20	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 20	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
Index parameter is optional	Chrome Full support Yes	Edge Full support 12	Firefox Full support 20	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 20	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support