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()