How to Insert a Row in an HTML Table in JavaScript ? Last Updated : 21 Mar, 2024 Comments Improve Suggest changes Like Article Like Report In JavaScript, we can insert a row dynamically in the HTML table using various approaches. JavaScript provides us with different methods to accomplish this task as listed below. Table of Content Using insertRow() and insertCell()Using insertAdjacentHTML()Using insertRow() and insertCell()In this approach, we are using the insertRow() and insertCell() methods in JavaScript to dynamically insert a new row into an HTML table. Syntax:tableObject.insertRow(index)tablerowObject.insertCell(index)Example: The below example uses insertRow() and insertCell() to insert a row in an HTML table in JavaScript. HTML <!DOCTYPE html> <html> <head> <title>Example 1</title> <style> body { text-align: center; font-family: Arial, sans-serif; } h3 { margin-bottom: 20px; } table { margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid black; padding: 8px; } </style> </head> <body> <h3> Using insertRow() and insertCell() <br/> to add a new row in HTML table. </h3> <table id="tab"> <thead> <tr> <th>Subject</th> <th>Marks</th> </tr> </thead> <tbody> <tr> <td>Python</td> <td>56</td> </tr> <tr> <td>JS</td> <td>60</td> </tr> </tbody> </table> <br/> <button onclick="insertFn()"> Insert Row </button> <script> function insertFn() { const table = document.getElementById("tab"). getElementsByTagName('tbody')[0]; const newRow = table.insertRow(); const cell1 = newRow.insertCell(0); const cell2 = newRow.insertCell(1); cell1.innerHTML = "CSS"; cell2.innerHTML = "67"; } </script> </body> </html> Output: Using insertAdjacentHTML()In this approach, we are using the insertAdjacentHTML() method in JavaScript to dynamically insert a rown in the HTML table. Syntax:node.insertAdjacentHTML(specify-position, text-to-enter)Example: The below example uses insertAdjacentHTML() to insert a row in an HTML table using JavaScript. HTML <!DOCTYPE html> <html> <head> <title>Example 2</title> <style> body { text-align: center; font-family: Arial, sans-serif; } h3 { margin-bottom: 20px; } table { margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid rgb(255, 0, 0); padding: 8px; } </style> </head> <body> <h3> Using insertAdjacentHTML() to insert a Row <br/> dynamically inside an HTML table. </h3> <table id="tab"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>GFG 1</td> <td>30</td> </tr> <tr> <td>GFG 2</td> <td>25</td> </tr> </tbody> </table> <br/> <button onclick="insertFn()"> Insert Row </button> <script> function insertFn() { const newRow = `<tr> <td>GFG 3</td> <td>34</td> </tr>`; document.getElementById('tab'). getElementsByTagName('tbody')[0]. insertAdjacentHTML('beforeend', newRow); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Insert a Row in an HTML Table in JavaScript ? G gpancomputer Follow Improve Article Tags : HTML JavaScript-Questions Similar Reads How to Append Header to a HTML Table in JavaScript ? JavaScript allows us to dynamically modify the structure of a table based on user interaction or other dynamic events. Here we will use JavaScript to dynamically create a Header row and then append it to the HTML table. ApproachIn this approach, we are using create elements along with DOM manipulati 3 min read How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll 3 min read JavaScript - How to Add, Edit and Delete Data in HTML Table? To add edit and delete features in an HTML table with JavaScript, create buttons for each action. Use JavaScript functions to add new rows, edit existing data, and remove rows as needed.Approach to Add Edit and Delete DataThe addData() method obtains the data from the input fields and creates a fres 3 min read How to Add Pagination in HTML Table ? Pagination is a common feature in web applications, especially when dealing with large datasets. It helps in dividing the data into manageable chunks, improving the user experience by reducing the amount of data displayed at once and speeding up page loading times. In this article, we will discuss t 3 min read How to Add Automatic Serial Number in HTML Table ? Adding automatic serial number to an HTML table is a common requirement for displaying data in a structured format. Serial numbers help users to easily identify and refer to individual rows in a table. In this article, we will discuss two methods to add serial numbers to an HTML table i.e. using HTM 3 min read How to Add Image inside Table Cell in HTML ? Adding images inside HTML table cells can enhance the visual appeal of your tables by up to 60%, making your content more engaging and easier to understand. This approach allows you to effectively present visuals alongside text for better communication and user experience.Image inside Table CellThes 2 min read How to dynamically insert id into table element using JavaScript ? This article explains how to dynamically insert "id" into the table element. This can be done by simply looping over the tables and adding "id"s dynamically. Below are the approaches used to dynamically insert id into table elements using JavaScript: Table of Content Using classList ObjectUsing clas 3 min read How to Add Input Field inside Table Cell in HTML ? In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri 3 min read How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co 6 min read Like