在jQuery中研究insertAfter的效果

Question

为了理解.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列时;

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

Answer 1

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

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

Answer 2

您可以检查仅适用于firebug中的hover的元素的样式：

检查具有悬停样式的元素，单击DOM节点，使其选中并以蓝色突出显示。然后转到右侧的样式选项卡并单击小箭头，然后选择:hover现在Firefox将保留悬停样式，您可以在底部捕获div。

在您的情况下，您可以使用#tooltip的CSS或使用文本居中的div的样式。