title: Javascript - efficiently insert multiple HTML elements
body: <p>I'd like to create a <code>select</code> element with a list of a user's Facebook friends (obtained as a JSON object).  I hardcode <code>&lt;select id="friends"&gt;&lt;/select&gt;</code> into my HTML, then use the following Javascript code to parse the JSON and insert each friend as an <code>option</code> of the <code>select</code> element:</p>
  
  <pre><code>var msgContainer = document.createDocumentFragment();
  for (var i = 0; i &lt; response.data.length; i++) { 
      msgContainer.appendChild(document.createTextNode('&lt;option value="'+response.data[i].id+'"&gt;'+response.data[i].name+'&lt;/option&gt;'));    
  }
  document.getElementById("friends").appendChild(msgContainer);
  </code></pre>
  
  <p>This almost works, except that it inserts <code>&amp;lt;</code> and <code>&amp;gt;</code> instead of <code>&lt;</code> and <code>&gt;</code>.  How can I fix it, and is there a more efficient way to insert multiple HTML elements using pure Javascript (not JQuery)?</p>