innerHTMLなしで純粋なjavascriptを使用して大量のHTMLを追加する方法

Question

DOMの既存の要素に大量のHTMLを追加する方法を決定しようとしています。特定の制約のため、innerHTMLを使用することはできません。おそらく、innerHTMLを使うのは悪いことです。なぜなら、オブジェクトのようなものを扱わず、DOMや何かをリロードするからです。私はjqueryの.append（）がオプションであることを知っています。これは正常に動作しますが、純粋なjavascriptを使用したいのです。私はjQueryがもう使用されるべきではないということをいくつか読んだ。他のライブラリがある場合、またはjQueryが有効なオプションである場合は、それを使用しても問題ありません。私はちょうど "正しい方法"をやることをやっています。

ここで私はそれをやってきました。関数は情報を取り、テーブル行を作成します。これは、forループ

document.getElementById('yourElement').appendChild(elementYouCreated) 

または使用の内側にそれらのループリストを、リストに作成された要素をプッシュすることができます

function flyoutAddTicket(caseID, ticketNumber, accountName, subject, tktStatus, priority, createdDate){ 
    //Create table row that will be inserted into the flyout table 
    var newtr = document.createElement("tr"); 
     newtr.id = "sfoFlyout_Ticket_" + caseID; 
     newtr.className = "sfoFlyout_Ticket"; 

    // Create elements that will be inserted into the list item 
    var tdOwn = document.createElement("td"); 
     tdOwn.id = "sfoFlyout_Ticket_" + caseID + "_OwnButton"; 
    var btnOwn = document.createElement("button"); 
     btnOwn.className = "sfoFlyout_own sfo_button"; 
     btnOwn.value = caseID; 
     btnOwn.textContent = (easterEggs.pwnButton) ? "Pwn" : "Own"; 
    var tdTicketNumber = document.createElement("td"); 
     tdTicketNumber.id = "sfoFlyout_Ticket_" + caseID + "_TicketNumber"; 
    var aTicketNumber = document.createElement("a"); 
     aTicketNumber.textContent = ticketNumber; 
     aTicketNumber.href = "/" + caseID; 
    var tdAccountName = document.createElement("td"); 
     tdAccountName.id = "sfoFlyout_Ticket_" + caseID + "_Client"; 
     tdAccountName.textContent = accountName; 
    var tdSubject = document.createElement("td"); 
     tdSubject.id = "sfoFlyout_Ticket_" + caseID + "_Subject"; 
    var aSubject = document.createElement("a"); 
     aSubject.textContent = subject; 
     aSubject.href = "/" + caseID; 
    var tdStatus = document.createElement("td"); 
     tdStatus.id = "sfoFlyout_Ticket_" + caseID + "_Status"; 
     tdStatus.textContent = tktStatus; 
    var tdPriority = document.createElement("td"); 
     tdPriority.id = "sfoFlyout_Ticket_" + caseID + "_Priority"; 
     tdPriority.className = "sfoFlyout_Ticket_Priority"; 
     tdPriority.textContent = priority; 

    // Append elements to table row 
    if (sfoOptions.ownButton){ newtr.appendChild(tdOwn); } 
    tdOwn.appendChild(btnOwn); 
    newtr.appendChild(tdTicketNumber); 
    tdTicketNumber.appendChild(aTicketNumber); 
    newtr.appendChild(tdAccountName); 
    newtr.appendChild(tdSubject); 
    tdSubject.appendChild(aSubject); 
    newtr.appendChild(tdStatus); 
    newtr.appendChild(tdPriority); 

    // Assign user preferred colors/borders 
    for (var pref in preferences.clients){ 
    // Set border thickness/colors 
    if (preferences.clients[pref].name == "border"){ 
     newtr.style.borderBottomWidth = sfoOptions.borderThickness + "px"; 
     newtr.style.borderColor = preferences.clients[pref].color; 
    } 
    // Set row colors 
    if (preferences.clients[pref].name == accountName){ 
     newtr.style.backgroundColor = preferences.clients[pref].color; 
    } 
    } 

    //Add list item to the flyout 
    flyoutTable.appendChild(newtr); 
} 

Answer 1

...そう簡単な何かをするくらいのビットのように思えます***更新***は、それが最初にそれを使用して要素を埋めるために完全に受け入れられる内容だときに作成された要素

elementYouCreated.appendChild(itsChildYouCreated)