title: createDocumentFragment() used in a for loop
body: <p>Is <strong>createDocumentFragment()</strong> doing anything in the code below?  </p>
  
  <p>I'm trying to adapt this code.  I'm not sure how it works and the <code>for</code> loop doesn't seem to call on <code>tableFrag</code>.  Your insights?</p>
  
  <pre><code>function createTable(searchResults)
  {
      var results_table = 
          document.getElementById("report_results").getElementsByTagName("table")[0];
  
      var newLink, tableFrag;
      tableFrag = document.createDocumentFragment();
      tableFrag.appendChild(results_table);
  
      for (result_index in searchResults.results)
      {
          newRow = results_table.getElementsByTagName("tbody")[0].insertRow(-1);
  
          newCell = newRow.insertCell(-1);
          newCell.appendChild(document.createTextNode(searchResults.results[result_index]["score"]));
  
          newCell = newRow.insertCell(-1);
          newLink = document.createElement("a");
          newLink.href = 
              "officer.php?officer_seq="+searchResults.results[result_index]["officer_seq"];
          newLink.appendChild(document.createTextNode(searchResults.results[result_index]["officer_id"]));
          newCell.appendChild(newLink);
  
          newRow = null;
      }
      document.getElementById("report_results").appendChild(tableFrag);
  }
  </code></pre>
  
  <p>Specifically, what mystifies me is that <code>tableFrag</code> is not found in the loop:</p>
  
  <pre><code>    for (result_index in searchResults.results)
      {
          ...
          tableFrag this-or-that
          ...
      }
      document.getElementById("report_results").appendChild(tableFrag);
  </code></pre>