In this section, we will learn that the insertRow() method is and how to use it in JavaScript.

JavaScript Add Row to Table: insertRow() Method

The JavaScript insertRow() method is used to insert a new row (<tr>)to a table.

You can invoke this method using a reference to a table element, a reference to a <thead>, or a reference to <tfoot> element.

Note: you can also use the deleteRow() method to remove a row from a table.

Note: when creating a <tr> element using this method, you must also add one or more cells to it as well. To do this we can use the insertCell() method.

insertRow() Method Syntax:

tableElement.insertRow(index);

insertRow() Method Parameter

The method takes one argument and that is the index where we want to insert a new row.

Note that if there’s a row already set in that index, it will be pushed one level forward so that this new row could be added.

The value 0 means add the row as the first row of the target table.

The value -1 means to add the row as the last row of the target table.

Also, this value is optional and if ignored, the row will be added as the last row of the target table.

insertRow() Method Return Value

The return value of this method is a reference to the newly created row.

Example: add row to table JavaScript

See the Pen add row to table JavaScript by Omid Dehghan (@odchan1) on CodePen.

Note: please check the insertCell() section if you’re not familiar with this method.