title: HTML/Performance: Handling massive dynamic DOM insertion
body: <p>I have 464 JSON objects. An HTML element needs to be generated from each of these elements, and inserted into a div in sequential order. What's going to be the fastest way to render this?</p>
  
  <p>A) Loop through the objects, generating markup for each, concatenating them all, and setting the <code>innerHTML</code> of the container <code>div</code> to the concatenated markup:</p>
  
  <pre><code>document.getElementById("container").innerHTML = 
      jsonItems.map(function(item) {
          return convertToHTMLString(item);
      }).join("");
  </code></pre>
  
  <p>B) Loop through the objects, generating a DOM node for each, and inserting each sequentially into container:</p>
  
  <pre><code>var container = document.getElementById("container");
  
  jsonItems.forEach(function(item) {
      container.appendChild(convertToDOMNode(item));
  });
  </code></pre>
  
  <p>C) Loop through the objects, generating a DOM node for each, sequentially appending them to a <code>DocumentFragment</code>, then inserting the fragment into the container:</p>
  
  <pre><code>var fragment = document.createDocumentFragment();
  
  jsonItems.forEach(function(item) {
      fragment.appendChild(convertToDOMNode(item));
  });
  
  document.getElementById("container").appendChild(fragment);
  </code></pre>