How to Use DOM to Add a Table Element
- 1). Right-click the HTML file you want to use to add the table elements. Click "Open With," then click the HTML editor in the list of submenu programs.
- 2). Get the table element ID and assign the table to a variable. Creating the variable allows you to manipulate the table elements. The following code creates a variable from the HTML table on the page:
var table = document.getElementById("table"); - 3). Add a table row. Type the following code to append a new row to the table:
var r = table.insertRow("newrow"); - 4). Create a cell and add content to the cell. The following code adds a cell to the new row:
var c = r.insertCell(0);
var input = document.createElement('input');
input.text = "This is content for the cell";
c.appendChild(input);
The code above adds a cell and a text box that displays content. You can continue adding more cells and content to the table.
Source...