How to get the full table html from Jquery? [duplicate]

Question

I am trying to get the table html in Jquery.

I have the following:

<table id='table' border='1'>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
</table>

I have

var test = $('#table').html()

but when i console.log(test) i got

<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>
<tr><td>items...</td><td>items2...</td></tr>

without <table> tags.

Is there anyway to fix this? Thanks a lot!

Answer 1

A more jQuery oriented approach would be to retrieve the outerHtml property from the table.

 $('#table').prop('outerHTML')

Answer 2

One option is:

document.getElementById('table').outerHTML;

JS Fiddle demo.

Or, you could instead:

$('<div />').html($('#table').clone()).html();

JS Fiddle demo.