Text vs innerHTML in jQuery

Question

I get the same result from both methods, but not sure why. A SO study tells me the following:

.text () returns the JUST text of this element and all its children, where asinnerHTML returns all the HTML in this element.

However, further research tells me this: The real problem is that text () and innerHTML work on completely different objects.

May I have a clarification?

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' 

Answer 1

.text() will return a string representation of all text nodes in this element, and .html() will provide you with a representation of all nodes.