Appending to <td> instead of below <tr>. What's wrong?
<p>In this jsFiddle</p>

<p><a href="http://jsfiddle.net/littlesandra88/tZqYX/" rel="nofollow">http://jsfiddle.net/littlesandra88/tZqYX/</a></p>

<p>would I like that a new <code>&lt;tr&gt;</code> is inserted below the one where "Details" is clicked.</p>

<p>I do</p>

<pre><code>$('.row').append("&lt;tr&gt;&lt;td&gt;It worked&lt;/td&gt;&lt;/tr&gt;");
</code></pre>

<p>but this results in</p>

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

<p>where I was hoping for</p>

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

<p>Any idea how to fix this?</p>
