javascript - 为什么 .html() 不将所有内容替换为当前值？

Question

这是我的代码:

$('table').html('<tr><td>test</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<img src="default.jpg" />
</table>

如您所见，该图像仍然存在。为什么？我用过 .html ，所以这是执行此操作后的预期结果:$('table').html('<tr><td>test</td></tr>');

<table>
    <tr>
        <td>test</td>
    </tr>
</table>

我该怎么做？

Answer 1

原因是 img在您调用 html 时不在表内，因为这是不允许的。 <table><img ...></table>是无效标记；表只能直接包含certain table-related elements , 不是 img元素。因此，浏览器通过移动 img 来为您修复它。离开 table 。 (例如:Chrome 通过将 img 移动到表格正前方来修复它:<img ...><table></table>。)

如果它首先在表中，是的，调用 html替换表格内容会起作用:

$('table').html('<tr><td>test</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <img src="default.jpg" />
    </td>
  </tr>
</table>

---

在您提出的评论中:

...how can I select the image in this? <img src="#" /> <table></table> ? Actually I want to start selecting with table tag. like this $('table').sibiling ...

我不认为你可以，可靠地，因为原始标记再次无效，所以浏览器可以自由地做他们想处理的事情。也就是说，Chrome、Firefox 和 IE11 似乎都将 img 放在了 表格之前，所以 $("selector-for-the-table").prev()应该是 img :

var table = $('table');
table.html('<tr><td>test</td></tr>');
table.prev().remove(); // Remove the img

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<img src="default.jpg" />
</table>