JavaScript createElement表格添加不需要的tbody

Question

我使用簡潔的JavaScript和Jquery的混合來動態創建表格。我使用for循環遍歷Ajax調用返回的數據，但它不會創建新行。所以我使用alert來輸出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>