JQuery Append误将新行嵌套进已有行，需在表格末行前插入新行

问题根源 #

你当前用的append()方法会把内容插入到选中元素的内部末尾，但<tr>的合法子元素只能是<td>或<th>，把<tr>嵌套进另一个<tr>里违反HTML规范，浏览器只能错误解析成嵌套结构，这就是你遇到的问题。

正确实现方式 #

要在最后一行之前插入新行，得用能把内容插入到元素外部的方法，以下两种方式都可行：

方式一：使用before() #

直接选中最后一行，调用before()插入新行：

$('#sbdrp_table > tbody tr:last-child')
  .before('<tr><td>my data</td><td>more data</td></tr>');

方式二：使用insertBefore() #

先创建新行元素，再插入到最后一行之前：

$('<tr><td>my data</td><td>more data</td></tr>')
  .insertBefore('#sbdrp_table > tbody tr:last-child');

这两种方法都会把新行正确放在目标行前面，不会出现嵌套问题，完全符合你的预期效果。

内容的提问来源于stack exchange，提问作者meks285