In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > insertCell (tr)

insertCell method (tr)

Browser support:

Creates an empty cell element and inserts it into the current row element at the specified position.

This method provides a simpler way to create and insert a cell into a row than creating the cell with the createElement method and inserting it with the insertBefore method.

To remove a cell, use the deleteCell method.

Syntax:

object.insertCell (index);

You can find the related objects in the Supported by objects section below.

Parameters:

index

Required in Firefox and Opera, optional in Internet Explorer, Google Chrome and Safari. Zero-based integer that specifies the position of the new cell in the cells collection of the current row.

The value of -1 can also be used; in that case, the new cell will be inserted at the last position.
If this parameter is not specified, this method inserts the new cell at the last position in Internet Explorer and at the first position in Google Chrome and Safari.

Return value:

Returns the inserted cell element.

Example HTML code 1:

This example illustrates the use of the insertCell method:

<head>
    <script type="text/javascript">
        function InsertNewCell () {
            var table = document.getElementById ("table");
            var firstRow = table.rows[0];
            var cell = firstRow.insertCell (1);
            cell.innerHTML = "The new cell";
        }
    </script>
</head>
<body>
    <button onclick="InsertNewCell ();">Insert a new cell!</button>
    <br /><br />
    <table id="table" border="1px">
        <tbody>
            <tr>
                <td>First cell in the row.</td>
                <td>Second cell in the row.</td>
            </tr>
        </tbody>
    </table>
</body>