Question

I want to add new a new <tr> into a <table>, but the elements are adding in the wrong order (desc). I always want to add the new <tr> below.

HTML:

<button id="b1">add element</button>
<form>
<table id="table">
    <thead>  
        <tr>
            <th>Element:</th>
        </tr>
    </thead>
    <tbody>  
    </tbody>  
</table>
</form> 

jQuery:

var i=0;
$('#b1').click(function() {
    $("#table > tbody:last").after('<tr><td>Element' + i + '</td></tr>');
i++;
}); 

Live demo: jsFiddle

What am I doing wrong?

Answer 1

use the append() method:

var i=0;
$('#b1').click(function() {
    $("#table > tbody").append('<tr><td>Element' + i + '</td></tr>');
i++;
});