javascript createElement table adding unwanted tbody

I'm using a mixture of plain-jane JavaScript and Jquery to dynamically create a table. I use a for loop to iterate through the data returned from an Ajax call, but it isn't creating new rows. So I output the html using an alert, and I can see there's quite a mix up of table elements, including a tbody that shows up, even though I'm not explicitly creating a tbody.

Ajax code, where on "done", I create a table:

function performSearch(){
    var q = $("input[name='search']").val();
    var url = "performsearch.php";
    $.ajax({
        url: url,
        method: "post",
        data: { 'q' : q },
        dataType: "json"
    }).done(function(data) {
        /* the table creating part of the code - something wrong in here */
        var output = $("#output");
        var table = document.createElement("table");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var button = document.createElement("button");
        output.append( $(table) );
        $(table).append( $(tr) );
        $(tr).append( $(td).attr("colspan","100%") );
        $(td).append( $(button).attr("type","button").on("click",function() {
                 exportOutput(data);
             }).html("Export"));

        $(table).append("<tr>n"); // I'm clearly adding a tr tag, but it doesn't show up
        $(table).append("   <th>id</th>n");
        $(table).append("   <th>processed thru</th>n");
        $(table).append("</tr>"); //ending the tr tag

        for(i=0;i<data.length;i++){ //let's say only one record is returned
            $(table).append("<tr>n"); //clearly adding a tr tag, but it's not showing up
            $(table).append("   <td>"+data[i]['id']+"</td>n");
            $(table).append("   <td>"+data[i]['processed_thru']+"</td>n");
            $(table).append("</tr>n");
        }
    }).
    fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + jqXHR + ", " + textStatus );
    });
}

Here's the html it's producing:

<table>
    <tbody>  <!-- look at tbody tag, where'd it come from? -->
    <tr><td colspan="100%"><button type="button">Export</button></td></tr>
    <tr></tr> <!-- look at this extra tr tag, where'd it come from? -->
    <tr></tr>n <!-- look at this extra tr tag, where'd it come from? -->
    </tbody>n <!-- I didn't add this -->
    <th>id</th> <!-- th tag not wrapped in a tr tag -->
    <th>processed thru</th>
    <th>status</th>
    <td>1568</td> <!-- td tags not wrapped in row tag -->
    <td>06/03/2016</td>
    <td>ACTIVE</td> <!-- no tr tag following the end of the td tags -->
</table>