How to add large amount of HTML using pure javascript without innerHTML

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

innerHTML should not be used when updating content, it's perfectly acceptable to initially fill an element using it. — SeinopSys
– SeinopSys, Commented Sep 3, 2016 at 22:17
Creating content like this is a tedious job, perhaps if you contextualize your question and you explain the reason behind it, it's easier to provide a pertinent answer. — Pietro Saccardi
– Pietro Saccardi, Commented Sep 3, 2016 at 22:25
@SeinopSys: Would you happen to have documentation for that? — japtain.cack
– japtain.cack, Commented Sep 3, 2016 at 23:53
@PietroSaccardi: Mozilla reviewers see the usage of innerHTML and immediately reject the app. They say it's a vulnerability, causes the DOM to reload, and bindings to be lost. That all is true; however, I use it on a doc-frag initially and then append that as a child. Which should be ok. That's supposedly what jQuery does under the hood. Just trying to understand a "better method" if there is one. — japtain.cack
– japtain.cack, Commented Sep 4, 2016 at 0:23

n4gys4nyi · Accepted Answer · 2016-09-03 22:27:24Z

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)

answered Sep 3, 2016 at 22:27

n4gys4nyi

9351 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add large amount of HTML using pure javascript without innerHTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related