jQuery thead 对象不能附加 tr 对象

Question

我的问题是：我无法将tr 对象附加到thead 对象，但tfoot 可以正常工作。

没有错误、警告或任何东西，只是在生成的 html 代码中，thead 标记将为空。

var tableObj = $("<table />");
var theadObj = $("<thead />");
var tbodyObj = $("<tbody />");
var tfootObj = $("<tfoot />");

var trObj = $("<tr />");
trObj.append($("<th />").html("colName1"));
trObj.append($("<th />").html("colName2"));
trObj.append($("<th />").html("colName3"));

var trObj2 = $("<tr />");
trObj2.append($("<td />").html("colValue1"));
trObj2.append($("<td />").html("colValue2"));
trObj2.append($("<td />").html("colValue3"));

theadObj.append(trObj); //as you can see in the result, the <thead> will be empty, why?
//theadObj.html('<tr>' + trObj.html() + '</tr>'); //but this works (it so ugly)
            
tfootObj.append(trObj);

tbodyObj.append(trObj2);

tableObj.append(theadObj);
tableObj.append(tbodyObj);
tableObj.append(tfootObj);

$("#test").append(tableObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

如果有人有任何想法，请与我分享，提前谢谢！

Answer 1

事实上你可以将它附加到thead，但你的问题是你将相同的object附加到thead然后到tfoot，所以第二个apppend操作被省略了第一个，对象被移动到tfoot，这就是为什么你只看到它附加到tfoot。

这是一个 sn-p，显示它仅附加到 thead（我注释了将其附加到 tfoot 的代码）。

var tableObj = $("<table />");
var theadObj = $("<thead />");
var tbodyObj = $("<tbody />");
var tfootObj = $("<tfoot />");

var trObj = $("<tr />");
trObj.append($("<th />").html("colName1"));
trObj.append($("<th />").html("colName2"));
trObj.append($("<th />").html("colName3"));

var trObj2 = $("<tr />");
trObj2.append($("<td />").html("colValue1"));
trObj2.append($("<td />").html("colValue2"));
trObj2.append($("<td />").html("colValue3"));

theadObj.append(trObj); //as you can see in the result, the <thead> will be empty, why?
//theadObj.html('<tr>' + trObj.html() + '</tr>'); //but this works (it so ugly)
            
//tfootObj.append(trObj);

tbodyObj.append(trObj2);

tableObj.append(theadObj);
tableObj.append(tbodyObj);
tableObj.append(tfootObj);

$("#test").append(tableObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

所以总而言之，一个对象只能附加到单个元素。