将thead附加到表

Question

在尝试动态创建HTML table时，我似乎误解了jQuery的append函数。

我有div作为容器：

<div id="tablecontainer"></div>

在我的JavaScript中，我似乎正确地在我的容器div中放置一个空的table：

$(document).ready(function() {
    var $tableContainer = $('#tablecontainer'),
        $table = $tableContainer.append('<table></table>'),
        $thead = $table.append('<thead></thead>');
});

但是，当我尝试将thead标记放在table内时，它似乎是将它放在表格之外，而不是嵌套在表格内

以下是Chrome的开发工具中的内容：

这就是我所期待的：

<div id="tablecontainer">
    <table>
        <thead>
        </thead
    </table>
</div>

Here是一个jsbin。

对这里发生的事情有任何想法吗？

Answer 1

append不会返回您刚刚追加的元素，因此：

$table = $tableContainer.append('<table></table>')

$table实际上仍指向$tableContainer。

有几种解决方案，但您可以使用$tableContainer.find('table')来获得正确的参考。

Answer 2

实际上$tableContainer和$table在这种情况下是相同的。因为append()方法返回元素本身。您可以像find()一样使用。

var $tableContainer = $('#tablecontainer'),
    $table = $tableContainer.append('<table></table>'),
    $thead = $table.find('table').append('<thead></thead>');

Answer 3

var mytable = $('<table/>', {
    class: 'print_table '
  }).append(
          $('<thead/>'),
          $('<tfoot/>'),
          $('<tbody/>')
          );

//好吧，并在 thead

中添加一些内容

$("thead", mytable).append(TitleCell);