如何使用没有innerHTML的纯javascript添加大量HTML答案

【问题标题】：How to add large amount of HTML using pure javascript without innerHTML如何使用没有innerHTML的纯javascript添加大量HTML
【发布时间】：2016-09-03 22:15:22
【问题描述】：

我正在尝试确定如何将大量 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);
}

【问题讨论】：

innerHTML 不应在更新内容时使用，最初使用它填充元素是完全可以接受的。
创建这样的内容是一项乏味的工作，也许如果您将问题背景化并解释其背后的原因，则更容易提供中肯的答案。
@SeinopSys：你会碰巧有这方面的文档吗？
@PietroSaccardi：Mozilla 审阅者看到了 innerHTML 的使用并立即拒绝了该应用程序。他们说这是一个漏洞，导致 DOM 重新加载，绑定丢失。一切都是真的；但是，我最初在 doc-frag 上使用它，然后将其作为孩子附加。这应该没问题。据说这就是 jQuery 在幕后所做的。只是想了解一种“更好的方法”（如果有的话）。

标签： javascript jquery html innerhtml

【解决方案1】：

您可以将创建的元素推送到列表中，它们会在列表中循环，然后在 for 循环中

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

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

elementYouCreated.appendChild(itsChildYouCreated)

【讨论】：