How to load specific HTML element in a variable?

I would like to load all table elements from my index.html which have the specified class assigned in a variable. Unfortunately the first line of HTML doesn't load correctly.

My HTML (example for one table, usually there a few of them):

<!-- More HTML stuff -->
<table class="class_TopTable table" id="id_TopTable">
  <tr>
    <td>
      <button id="id_Remove">Remove 1</button>
    </td>
    <td>
      <div id="id_Title"><B>Title 1</B></div>
      <div id="id_Content">Content 1</div>
    </td>
  </tr>
</table>
<!-- More HTML stuff -->

My Javascript:

var all_class_TopTable = "";
$('.class_TopTable').each(function(){
      all_class_TopTable += $(this).html();
})

After this JS is run, the variable of all_class_TopTable containts following HTML:

<tbody>
  <tr>
    <td>
      <button id="id_Remove">Remove 1</button>
    </td>
    <td>
      <div id="id_Title"><B>Title 1</B></div>
      <div id="id_Content">Content 1</div>
    </td>
  </tr>
</tbody>

Where the first line is different as my real html. I expect in the beginning <table class="class_TopTable table" id="id_TopTable"> and in the end </table>.

But the result is in the beginning <tbody> and in the end </tbody>.

What do I wrong?

You could use the outerHTML property to capture the element itself along with its descendants.

all_class_TopTable += $(this)[0].outerHTML;

As the html method only captures its descendants, it wraps it with tbody.