Anhängen an neue Knoten, die noch nicht in das Dokument eingefügt wurden

Question

Um meinen Code übersichtlich zu gestalten und überflüssiges dom rendering zu reduzieren, versuche ich, eine Tabelle zu erstellen und zu befüllen, bevor ich sie an das Dokument angehängt habe. Das Problem, das ich habe ist, dass nur die divs an die Tabelle angehängt werden, so dass ich am Ende eine Tabelle voller divs anstelle von trs mit tds, die divs enthalten, habe.

Ich bin mir ziemlich sicher, dass dies, weil, wenn ich die Verwendung .appendTo Funktion es ist nicht die td zum tr anhängt, und die tr zum table sondern das div wird entfernt und zu jedem wiederum anhängt, schließlich bis endend in der Tabelle.

Wie kann ich eine Knotenkette vor dem Anhängen an das Dokument erstellen?

Code:

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() nicht einen String-Wert annehmen. $() tut aber so könnte man Code wie folgt ändern:

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

Das heißt, dies nicht der sauberste Weg, es zu tun, möchten Sie vielleicht einen Blick auf Templating Engines haben, wenn Sie eine Menge von ihnen haben Strukturen in Ihrem Code.

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); 
};