How to add multiple rows dynamically in JavaScript?

In this article, we will discuss how to dynamically add multiple rows to an HTML table using JavaScript.

This dynamic row addition is useful when you want to allow users to input multiple sets of data without the need for a fixed number of rows in your table.

Method 1: Using the InsertRow Method #

The insertRow method allows you to add rows to a table dynamically. Here's a code snippet that demonstrates how to add multiple rows using this method:

Explanation of the above example:

1. We select the table by its ID using getElementById() method.
2. Inside the loop, we create a new row using insertRow and insert cells into it.
3. You can customize the content of the cells, such as adding input fields for data entry.

Method 2: Using InnerHTML Property #

Another approach is to use the innerHTML property of the table to add rows dynamically.

Explanation:

We select the table by its ID.
Inside the loop, we append HTML code for new rows with <button> elements to the table using innerHTML property.

Conclusion #

In this article, we've explored two effective methods for dynamically adding multiple rows to an HTML table using JavaScript.