Javascript - efficiently insert multiple HTML elements

Question

I'd like to create a select element with a list of a user's Facebook friends (obtained as a JSON object). I hardcode <select id="friends"></select> into my HTML, then use the following Javascript code to parse the JSON and insert each friend as an option of the select element:

var msgContainer = document.createDocumentFragment();
for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(document.createTextNode('<option value="'+response.data[i].id+'">'+response.data[i].name+'</option>'));    
}
document.getElementById("friends").appendChild(msgContainer);

This almost works, except that it inserts < and > instead of < and >. How can I fix it, and is there a more efficient way to insert multiple HTML elements using pure Javascript (not JQuery)?

Answer 1

Try this in your for loop instead:

var o = document.createElement('option');
o.setAttribute('value', response.data[i].id);
o.appendChild(document.createTextNode(response.data[i].name));
msgContainer.appendChild(o);

Answer 2

For those who need similar functionality, you can generate an html snippet using template literals and insert it using innerHTML property. Plus you can set attributes and selected while iterating over the items:

const el = document.createElement('select');
el.innerHTML = ['John', 'Sally', 'Betty'].reduce((acc, prev, i) => {
  if (i === 1) {
    return acc + `<option selected>${prev}</option>`;
  }
  return acc + `<option>${prev}</option>`;
}, '');

const root = document.querySelector('#app');
root.appendChild(el);

In modern browsers this is faster than creating elements one by one imperatively.