Appending to <td> instead of below <tr>. What's wrong?

In this jsFi开发者_开发问答ddle

http://jsfiddle.net/littlesandra88/tZqYX/

would I like that a new <tr> is inserted below the one where "Details" is clicked.

I do

$('.row').append("<tr><td>It worked</td></tr>");

but this results in

<tr class="row">
  <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
<tr><td>It worked</td></tr></tr>

where I was hoping for

<tr class="row">
  <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
</tr>
<tr><td>It worked</td></tr>

Any idea how to fix this?

---

Try $('.row').after("<tr><td>It worked</td></tr>");

.append. is appending the row to the .row row. Using .after will put the row AFTER the .row row

---

Try .after() instead of .append()

$('.row').after("<tr><td>It worked</td></tr>");

---

You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.

---

Try .after() instead. .append() is for sticking something INSIDE the specified element at the end of the child list

---

$(<tr><td>It worked</td></tr>").insertAfter($('.row'));

---

You need to append the new row to the tbody element, not to the row itself

---

You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.

$('#accTable').append("<tr><td>It worked</td></tr>");

---

The .after() is probably what you're looking for. It will append the text after the row element.