Add table row dynamically in jQuery

Want to add an additional row to a table as the last row in jQuery? Use jQuery after() method to add table row dynamically after last row.

You can include anything within the after() method and this is a valid HTML, including multiple rows as per the example below:

Example to add table row dynamically:

<!DOCTYPE>
<head>
<title>Add table row dynamically in jQuery</title>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$('#myTable tr:last').after('<tr>New Row</tr>');
});
});
</script>
</head>
<body>
<table id="myTable">
<tr>Old Row</tr>
<tr>Old Row</tr>
</table>
<input type="button" name="btn" id="btn" value="Add" />
</body>
</html>

Read: Traversing Siblings