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

You are here: Reference > JavaScript > client-side > HTML DOM > methods > insertRow (table, tbody, tfoot, thead)

insertRow method (table, tbody, tfoot, thead)

Browser support:

Creates an empty row element and inserts it into the current table, thead, tfoot or tbody element.

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

To remove a row, use the deleteRow method.

Syntax:

object.insertRow (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 row in the rows collection of the current element.

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

Return value:

Returns the inserted row element.

Example HTML code 1:

This example illustrates the use of the insertRow method:

<head>
    <script type="text/javascript">
        function InsertNewRow () {
            var table = document.getElementById ("table");
            var row = table.insertRow (1);
            var cell = row.insertCell (0);
            cell.innerHTML = "New row";
        }
    </script>
</head>
<body>
    <button onclick="InsertNewRow ();">Insert a new row!</button>
    <br /><br />
    <table id="table" border="1px">
        <tbody>
            <tr>
                <td>First row.</td>
            </tr>
            <tr>
                <td>Second row.</td>
            </tr>
        </tbody>
    </table>
</body>