jquery - JQueryのテキストとinnerHTML

Question

どちらの方法でも同じ結果が得られますが、その理由はわかりません。SOに関する調査では、次のことがわかります。

.text() は、その要素とそのすべての子孫要素のテキストのみを返しますが、.innerHTML はその要素のすべての HTML を返します。

ただし、さらに調査すると、次のことがわかります。本当の問題は、 text() と innerHTML がまったく異なるオブジェクトで動作することです。

明確にすることはできますか？

HTML

<table id="table2">
<th> Col1 </th>
<th> Col2 </th>
<tbody>
<tr>
<td id="data">456</td>
</tr>
</tbody>
</table>

JQuery

$('td').click(function() {
    var x=$(this).text();
    alert(x); //returns '456'
})

var abc = document.getElementById('data');
var xyz = abc.innerHTML;
    alert(xyz); //also returns '456'