IE9 - Loading html table into a page with jQuery

Question

I have built a very simple example, loading a table into a page via ajax from another html page and it works fine in all browsers, except IE9, that seems to nest tables. Replacing table with div isn't an option here. What would be the workaround for it? (I'm using jquery-1.8.1)

Here is my code: index.html

<table id="table_id">
        <thead>
            <tr>
                <th>Sort Column 1</th>
                <th>Sort Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
 <button>load new data</button>

  <script type="text/javascript">
    $(document).ready(function () {
        var tbl = $('#table_id');

        $("button").on("click", function () {
            var xhr = $.ajax("table.html")
                     .done(function (data) {
                         tbl.html(data);
                     });
        });
    });

</script>  

table.html

<table id="table_id">
        <thead>
            <tr>
                <th>Sort Heading 1</th>
                <th>Sort Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 New Data 11</td>
                <td>Row 1 New Data 22</td>
            </tr>
            <tr>
                <td>Row 2 New Data 11</td>
                <td>Row 2 New Data 22</td>
            </tr>
        </tbody>
    </table>

Answer 1

You can use .replaceWith

$('#table_id').replaceWith(data);

Because .html replaces internal content. In our case, after use .html table look like this

<table id="table_id">
   <table id="table_id">
      ... 
   </table>
</table>