javascript createElement table不要なtbodyを追加する

Question

私はプレーンジェーンJavaScriptとJqueryを混在させてテーブルを動的に作成しています。私はforループを使ってAjax呼び出しから返されたデータを反復処理しますが、新しい行は作成されません。だから、私は警告を使ってhtmlを出力します。テーブル要素がかなり混在していることがわかります。tbodyを明示的に作成していなくても、表示されているtbodyも表示されます。

「完了」に、私はテーブルを作成するAjaxコード：

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); 
    }); 
} 

ここでは、生産のHTMLです：

<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>