You can see in the given example, we have created a table whose id is grabbed by the method document.getElementById(id) and stored it into the variable 'tbody'. The method createElement() creates the row element 'tr' and 'td'. As you already know that 'td' contains the table data and 'tr 'defines a row that contains the 'td' element. Now, the method appendChild(document.createTextNode()) adds the text node to the 'td' element as the table data. Then we have added the 'td' data to the row element 'tr'. When you load the page, you will get the table containing the columns Name and Address and a button 'Add row'. On clicking the button, a new row will be added to the table.
Here is the code:
Output will be displayed as:
On clicking the button, a new row is added to the table:
If you enjoyed this post then why not add us on Google+? Add us to your Circles
Liked it! Share this Tutorial