javascript - 追加到尚未插入文档的新节点

Question

为了使我的代码简洁并减少不必要的 dom 呈现，我尝试在将其附加到文档之前构建并填充一个表。我遇到的问题是只有 div 被附加到表中，所以我最终得到一个充满 div 的表，而不是 tr 和包含 div 的 td。

我很确定这是因为当我使用 .appendTo 函数时，它没有将 td 附加到 tr，并且tr 到 table 而是删除 div 并将其依次附加到每个 div，最后在表格中结束。

如何在附加到文档之前构建节点链？

代码:

    var playerSelect = $( "#playerSelect" );
    var playerElements = [];
    var rowCounter = 0;
    var playerTable = $("<table/>").attr("id", "playerTable");
    for (player in playerBase){
        var playerDiv = $("<div/>").addClass("player").text(player + playerBase[player].rating);
        playerDiv.appendTo("<td/>").appendTo("<tr/>").appendTo(playerTable);                   
    };
    playerSelect.append( playerTable ); 

Answer 1

.appendTo() 不接受字符串值。 $() 但是，您可以这样更改代码:

$("<tr />").append($("<td />").append(playerDiv)).appendTo(playerTable);

也就是说，这不是最干净的方法，如果您的代码中有很多这样的结构，您可能想看看模板引擎。