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

Question

I'm trying to determine how to append a large amount of HTML to an existing element in the DOM. Due to certain constraints, I can't use innerHTML. Supposedly it's bad to use innerHTML as it doesn't treat things like an object and reloads the DOM or something. I know jquery's .append() is an option, as it supposedly does things properly, but I want to use pure javascript; I've read a few things saying jQuery shouldn't be used anymore. If there are any other libraries, or if jQuery is a valid option, then I'm fine with using it. I'm just trying to do/learn things the "right way".

Here's how I've been doing it. The function takes some info and creates a table row. This seems like a bit much to do something so simple...

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

you can push the created elements into a list them loop through the list and then inside the for loop

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

or use appendChild() on your created elements

elementYouCreated.appendChild(itsChildYouCreated)