HTMLTableRowElement: insertCell() 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.

Learn more
See full compatibility

The insertCell() method of the HTMLTableRowElement interface creates a <td> element, inserts it at the specified position in the given <tr> element, and returns it.

This method creates and inserts the element directly, without requiring separate calls to methods such as Document.createElement(), Node.insertBefore(), and Node.appendChild(). However, you cannot use insertCell() to create a new <th> element.

Syntax

insertCell()
insertCell(index)

Parameters

index Optional: The index of the new cell in the cells collection. 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 or smaller than -1.

Examples

This example uses HTMLTableRowElement.insertCell() to append a new cell to a row.

HTML

html

<table>
  <thead>
    <tr>
      <th>C1</th>
      <th>C2</th>
      <th>C3</th>
      <th>C4</th>
      <th>C5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

<button id="add">Add a cell</button>
<button id="remove">Remove last cell</button>
<div>This first row has <output>2</output> cell(s).</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const row = bodySection.rows[0]; // Select the first row of the body section
const cells = row.cells; // The collection is live, therefore always up-to-date
const cellNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateCellNumber() {
  cellNumberDisplay.textContent = cells.length;
}

addButton.addEventListener("click", () => {
  // Add a new cell at the end of the first row
  const newCell = row.insertCell();
  newCell.textContent = `Cell ${cells.length}`;

  // Update the row counter
  updateCellNumber();
});

removeButton.addEventListener("click", () => {
  // Delete the row from the body
  row.deleteCell(-1);

  // Update the row counter
  updateCellNumber();
});

Result

Specifications

Specification
HTML # dom-tr-insertcell-dev

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Aug 19, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content