使用变量选择器无法正确选中子元素，tbody前置内容重复问题

你遇到的问题核心是浏览器自动修正了不规范的表格DOM结构，导致你的jQuery选择器匹配到了多个<tbody>元素，最终内容被插入两次。

为什么会出现重复插入？ #

看你的原始HTML代码：

<table id="dislike_view_<?php some_func(); ?>"> 
  <tr><td>USER</td><td>DATE</td></tr> 
  <tbody> 
    <tr><td>aj0ob</td><td>06/05/2018</td></tr> 
  </tbody> 
</table>

HTML规范里，直接放在<table>下的<tr>元素会被浏览器自动包裹进一个隐式的<tbody>中。所以实际渲染后的DOM结构变成了：

<table id="dislike_view_xxx">
  <tbody>
    <tr><td>USER</td><td>DATE</td></tr>
  </tbody>
  <tbody> 
    <tr><td>aj0ob</td><td>06/05/2018</td></tr> 
  </tbody> 
</table>

你的jQuery选择器#dislike_view_'+id+' > tbody会同时选中这两个<tbody>，自然会把内容插入两次。

解决方法 #

方法1：修正HTML结构（推荐）

把表头的<tr>放到<thead>标签里，这样浏览器就不会自动生成额外的<tbody>，DOM结构会和你写的一致：

<table id="dislike_view_<?php some_func(); ?>"> 
  <thead>
    <tr><td>USER</td><td>DATE</td></tr> 
  </thead>
  <tbody> 
    <tr><td>aj0ob</td><td>06/05/2018</td></tr> 
  </tbody> 
</table>

这时候你的原有jQuery代码就能正常工作，只会插入到目标<tbody>的第一个子元素前。

方法2：修改jQuery选择器（无需改HTML）

如果暂时无法调整HTML结构，可以通过选择器精准定位到你想要的那个<tbody>，比如用:last选择最后一个<tbody>：

$('<tr><td>...</td><td>...</td></tr>').prependTo('#dislike_view_'+id+' > tbody:last');

或者给目标<tbody>添加一个class或id，比如：

<tbody class="data-tbody"> 
  <tr><td>aj0ob</td><td>06/05/2018</td></tr> 
</tbody>

然后用更精准的选择器：

$('<tr><td>...</td><td>...</td></tr>').prependTo('#dislike_view_'+id+' .data-tbody');

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