Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add rows to a table using JavaScript DOM?
We will learn how to add a row to a table using JavaScript DOM. To achieve this, we have multiple methods. Some of them are the following.
Using the insertRow() method
By creating the new Element
Using the insertRow() Method
The insertRow() method is used to insert a new row at a specified position in the table. It creates a new <tr> element and inserts it into the table. This takes a number as a parameter that specifies the position of the table. If we do not pass any parameter then it inserts the row at the starting of the table. If you want to insert the row in the last of the table, then pass -1 as the parameter.
Syntax
table.insertRow(index)
Return value ? The <tr> element which was inserted.
As we know a proper table has not just table rows (<tr>), but also table data cells (<td>). To insert cells inside a row we use the insertCell() method. It creates a <td> element inside the table row. It takes a number as a parameter that specifies the index of the cell inside that row.
Syntax
Below is the syntax to insert cell ?
row.insertCell(index)
Return value ? The <td> element which was inserted.
Steps to add a row to the table
Get the data table element.
Create a row using the insertRow() method and insert it into the table.
Create new cell(s) using the insertCell() method and insert them into the row you created.
Add data to the newly created cells.
Example
In this example, we have a table that contains the name of the students and their ages. We are adding a new student at the end of the table.
<!DOCTYPE html>
<html>
<head>
<title> Example- add rows to a table using JavaScript DOM </title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2> Adding rows to a table using JavaScript DOM </h2>
<p> Click on the button to add the row to the table </p>
<button id="btn" onclick="addRow()"> Click me </button>
<br><br>
<table id="myTable">
<thead>
<th> Name </th>
<th> Age </th>
<th> City </th>
</thead>
<tbody>
<tr>
<td> Alex </td>
<td> 20 </td>
<td> New York </td>
</tr>
<tr>
<td> Tim </td>
<td> 18 </td>
<td> Boston </td>
</tr>
<tr>
<td> Mark </td>
<td> 23 </td>
<td> San Diego </td>
</tr>
</tbody>
</table>
</body>
<script>
function addRow() {
// Get the table element in which you want to add row
let table = document.getElementById("myTable");
// Create a row using the insertRow() method and
// specify the index where you want to add the row
let row = table.insertRow(-1); // We are adding at the end
// Create table cells
let c1 = row.insertCell(0);
let c2 = row.insertCell(1);
let c3 = row.insertCell(2);
// Add data to c1 and c2
c1.innerText = "Elon"
c2.innerText = 45
c3.innerText = "Houston"
}
</script>
</html>
By Creating New Elements
In this method, we will create new rows and columns by using the document.createElement() method. This approach gives more control over the element creation process and is useful when you need to add specific attributes to elements.
Approach
Here are the steps to add a row to a table by creating elements:
Get the table body element in which you want to add a row
Create row element using
createElement()Create cells and insert data into cells
Append cells to the row
Append row to table body
Example
In this example, we create a new row with four columns and append it to the table body.
<html>
<head>
<title> Example- add rows to a table using JavaScript DOM </title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2> Adding rows to a table using JavaScript DOM </h2>
<p>Click on the button to add the row to the table </p>
<button id="btn" onclick="addRow()"> Click me </button>
<br><br>
<table id="myTable">
<thead>
<th> Name </th>
<th> Age </th>
<th> City </th>
<th> Course </th>
</thead>
<tbody id="tableBody">
<tr>
<td> Alex </td>
<td> 20 </td>
<td> New York </td>
<td> Java </td>
</tr>
<tr>
<td> Tim </td>
<td> 18 </td>
<td> Boston </td>
<td> Python </td>
</tr>
<tr>
<td> Mark </td>
<td> 23 </td>
<td> San Diego </td>
<td> JavaScript </td>
</tr>
</tbody>
</table>
</body>
<script>
function addRow() {
// Get the table body element in which you want to add row
let table = document.getElementById("tableBody");
// Create row element
let row = document.createElement("tr")
// Create cells
let c1 = document.createElement("td")
let c2 = document.createElement("td")
let c3 = document.createElement("td")
let c4 = document.createElement("td")
// Insert data to cells
c1.innerText = "Elon"
c2.innerText = "42"
c3.innerText = "Houston"
c4.innerText = "C++"
// Append cells to row
row.appendChild(c1);
row.appendChild(c2);
row.appendChild(c3);
row.appendChild(c4);
// Append row to table body
table.appendChild(row)
}
</script>
</html>
Comparison
| Method | Code Complexity | Performance | Flexibility |
|---|---|---|---|
insertRow() |
Simple | Faster | Limited |
createElement() |
More complex | Slightly slower | High - can add attributes |
Conclusion
Use insertRow() for simple table operations and createElement() when you need more control over the element creation. Both methods effectively add rows to tables dynamically using JavaScript DOM manipulation.
48K+ Views
