Question

<table border="2">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>one</td><td>two</td></tr>
    <tr><td colspan="2" id="new" >add new</td></tr>
</table>

$('#new').click(function(){
   $('#new').append("<tr><td>one</td><td>two</td></tr>");
})

Now if i click “add new” then this make:

one | two
one | two
add new
one  two

How can i make:

one | two
one | two
one | two
add new

LIVE: http://jsfiddle.net/tg5qD/

Answer 1

demo http://jsfiddle.net/eDNH5/2/

Another Working Demo http://jsfiddle.net/eDNH5/5/

API: http://api.jquery.com/before/

Updated another way

$('#new').click(function(){
    $('table tr:last').before('<tr><td>one</td><td>two</td></tr>');
})​

code

$('#new').click(function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})​