How to add table row in jQuery

Add table row in jQuery: Here in this article, we learn 4 different ways to add table row in jQuery on button click. i.e how to append a row to the table. Methods like .append(), prepend(), .after() and .before() are used to add table rows.

Let's see each of these methods with an example. Before that, we just add a button and table and 2 textboxes for our example.

Here HTML code looks like as shown below

HTML CODE :

Name <input id="txtName" type="text" /> Location <input id="txtLocation" type="text" />
<button id="btnAddRow">Add New Row </button>
<br/>
<br/>
<table border="1" id="myTable">
  <thead>
    <th>Name</th>
    <th>Location</th>
  </thead>
  <tr id="trow">
    <td>Satinder singh</td>
    <td>Mumbai</td>
  </tr>
</table>

# Using .append()

By using the .append() method we add elements at the end of the table i.e at the last index.