如何在不使用innerHTML的情況下使用純JavaScript添加大量HTML

Question

我正在嘗試確定如何將大量HTML附加到DOM中的現有元素。 由於某些限制，我不能使用innerHTML。 據說使用innerHTML不好，因為它不會像對象一樣對待對象並重新加載DOM或其​​他內容。 我知道jquery的.append（）是一個選項，因為它據說可以正確執行操作，但是我想使用純JavaScript； 我讀過幾句話說jQuery不應該再使用了。 如果還有其他庫，或者jQuery是有效的選項，那么我可以使用它。 我只是想以“正確的方式”做事/學習事情。

這就是我一直在做的事情。 該函數獲取一些信息並創建一個表行。 做這么簡單的事情似乎有點麻煩...

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

您可以將創建的元素推入列表，它們在列表中循環，然后在for循環中

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

或在創建的元素上使用appendChild()

elementYouCreated.appendChild(itsChildYouCreated)