Insert row dynamically in html using jquery?

Question

I am using below the code to insert a row dynamically in html table.

var newRow = jQuery('<tr><td><input style="width:200px" type="text" name="designation' +
counter + '"/></td><td><input style="width:200px" type="text" id="start_date'+ counter +'" name="start_date' +
        counter + '"/></td><td><input style="width:200px" id="end_date'+ counter +'" type="text" name="end_date' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);

This code works fine. The row is always inserted as last row. But i need to insert the row just before the last row. I mean if the table has 3 rows, then new row should be in 3rd place the row which was there in 3rd place should be moved to last. How can i achieve this? Please help me.

Thanks!

Answer 1

You can use the .before() method here like :

jQuery('table.authors-list tr:last').before(newRow);

• tr:last will get the last row in the authors-list table.
• .before() will insert the new row before the last one.

Answer 2

$('table tr:last').before($('<tr>....</tr>'))