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-
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. Ifindex
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
Specification |
---|
HTML Standard # dom-tr-insertcell-dev |
Browser compatibility
BCD tables only load in the browser
See also
HTMLTableElement.insertRow()
- The HTML element representing cells:
HTMLTableCellElement