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 행, 컬럼 및 행을 놓을 때 2 열 2;

1. 은 같은 렌더링 된 소스 코드가 있습니까? (유혹 할 때 렌더링 코드를 얻을 수 없다 F12 사용) 툴팁이 중간에 보이는 같은 위치에 표시되는 이유는
2. ?

Answer 1

이 요소는 콘텐츠와 시큐리티를 변경하는 것과 같습니다. 이동하지 않을 것이며 text()으로 설정하는 콘텐츠 이외에 마크 업도 변경되지 않습니다.

당신은 아무것도 검사 할 필요가 없습니다. 소스 코드가 스크립트에 바로 있고, 삽입하는 것은 당신이 말하는 것입니다. 이 선택과 파란색으로 강조 그래서는 DOM 노드를 클릭

이 호버 스타일을 가지고있는 요소를 검사 :

Answer 2

만 불을 지르고에서 hover에 적용 요소에 스타일을 검사 할 수 있습니다. 그런 다음 오른쪽의 스타일 탭으로 이동하여 작은 화살표를 클릭하고 :hover을 선택하십시오. 이제 Firefox에서 마우스를 올리면 스타일이 고정되고 하단에서 div를 찾아 낼 수 있습니다. 귀하의 경우에는

, 하나는 div의 텍스트 중심을위한 #tooltip에 대한 CSS 또는 스타일이 있습니다.