Add Table Rows and Cells with JavaScript

Contents
In this article, I will introduce how to add table rows and cells with JavaScript.
The HTMLTableElement.insertRow() method
The HTMLTableElement.insertRow () method is a method to add a new row to an HTML table and returns the tr element of the added row as a return value.
When you execute this method, an empty tr tag is added.
The syntax is below.
HTMLTableElement.insertRow();
Also, if you pass a number as an argument, you can add it to the specified line.
If 0 is specified as an argument, it can be added to the first row of the table, and if 1 is specified, it can be added to the second row.
The HTMLTableRowElement.insertCell() method
The HTMLTableRowElement.insertCell () method is a method to add a cell to a row in an HTML table.
The syntax is below.
HTMLTableRowElement.insertRow();
You can add a cell to the specified column by passing a number as an argument.
Sample Code
Below is sample code that inserts a row to a two-column HTML table and adds a value to each cell.
let myTable = document.getElementById('targetTable');
let newRow = myTable.insertRow();
let newCell = newRow.insertCell();
let newText = document.createTextNode('foo');
newCell.appendChild(newText);
newCell = newRow.insertCell();
newText = document.createTextNode('bar');
newCell.appendChild(newText);