Question

To understand the effect of .insertAfter, I designed a small table test that has 2 rows and 2 columns.

 <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>

The jquery code is:

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();
 });

The test includes hovering different cells and display tooltips.
The demo is at jsfiddle.

I want to know the source code when I hover different cells.
For example, when I hover row 1, column 1, the snapshot likes:

When I hover row 2, column 2, the snapshot likes:

Questions:
When mouse hovers row 1 column1 and row 2 column 2;

1. Do they have the same rendered source code?(Using F12 can’t get the rendered code when hovering)
2. Why the tooltips are displayed in the same position that seems in the middle?

Answer 1

It’s the same element, you are just changing it’s content and visibilty. It’s not going to move, and other than the content you are setting with text() the markup is not going to change either.

You don’t need to inspect anything, the source code is right there in your script, and what you insert is what you get, so to speak!