append() in jquery appending to right of tr?

I've got this:

$(".TempAddLineItem").live('click', function() { 
        var $this = $(this);
        $(this).closest("tr").append("<tr><td>row creating</td></tr>");
        //$(this).append("<tr><td>row creating</td></tr>");
        $this.prev('.AddLineItem').click();
        return false;
    });

The issue Im having开发者_StackOverflow is it appears to append to a <td> rather then a <tr> that is in my asp.net gridview, after the append it looks like it adds a column rather then a row ???

append() indeed inserts content inside the element. You're looking for after():

$(this).closest("tr").after("<tr><td>row creating</td></tr>");

EDIT: If you want to get a reference to the new table row, you can invert the logic and use insertAfter():

$("<tr><td>row creating</td></tr>").hide()
                                   .insertAfter($(this).closest("tr"))
                                   .fadeIn("slow");

You want after, not append.

.after

Description: Insert content, specified by the parameter, after each element in the set of matched elements.

.append

Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

the code apends it to the tr tag. so something like that is the result:

<tr>
    <td>orig</td>
    <tr><td>row creating</td></tr>
</tr>

you have to use after()