javascript - 研究jQuery中insertAfter的效果

为了了解.insertAfter的效果，我设计了一个小表格测试，该测试具有2行2列。

 <table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
        <tr>
          <td title="row 1*1" class="styletest">1*1</td>
          <td title="row 1*2" class="styletest">1*2</td>
        </tr>
        <tr>
          <td title="row 2*1" class="styletest">2*1</td>
          <td title="row 2*2" class="styletest">2*2</td>
        </tr>
     </table>

jQuery代码是：

var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.

function showTooltip(cell) {
    $tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
    showTooltip($(this));
 }, function() {
    $tooltip.hide();
 });

该测试包括将鼠标悬停在不同的单元格上并显示工具提示。
该演示位于jsfiddle.

当我将鼠标悬停在不同的单元格上时，我想知道源代码。
例如，当我将鼠标悬停在第1行，第1列时，快照如下：

当我将鼠标悬停在第2行，第2列时，快照如下：


问题：
当鼠标悬停在第1行第1列和第2行第2列时；


它们是否具有相同的渲染源代码？（悬停时使用F12无法获取渲染代码）
为什么工具提示显示在中间的相同位置？

最佳答案

这是相同的元素，您只是在更改其内容和可见性。它不会移动，除了您使用text()设置的内容之外，标记也不会更改。

您无需检查任何内容，脚本中的源代码就在其中，插入的内容就是您得到的，可以这么说！