文書にまだ挿入されていない新しいノードに追加する

Question

コードを簡潔にし、不必要なDOMのレンダリングを減らすために、文書を文書に追加する前にテーブルを作成して設定しようとしています。私が抱えている問題は、divだけがテーブルに追加されていることです。つまり、divを含むテーブルの代わりに、divを含むテーブルがあります。

私は.appendTo機能を使用する場合、それはtrにtdを追加し、tableへtrが、代わりに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); 

あなたのコード内の構造体。

Answer 2

for (player in playerBase){ 
var tr = $('<tr/>'); 
var td = $('<td/>'); 
    td.appendTo(tr); 
     var playerDiv = $("<div/>").addClass("player").text(player + playerBase[player].rating); 
     playerDiv.appendTo(td); 
     tr.appendTo(playerTable); 
};