Javascript - efficiently insert multiple HTML elements

Answer 1

Not sure why you're creating a text node, but it would seem that you want to create option elements, so you could use the Option constructor instead.

var msgContainer = document.createDocumentFragment();

for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(new Option(response.data[i].name, response.data[i].id));
}
document.getElementById("friends").appendChild(msgContainer);

---

Or you can use the generic document.createElement().

var msgContainer = document.createDocumentFragment();

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

---

It's nice to have a helper function for creating elements and setting properties at the same time.

Here's a simple example of one:

function create(name, props) {
    var el = document.createElement(name);
    for (var p in props)
        el[p] = props[p];
    return el;
}

It can be expanded to cover some specific needs, but this will work for most cases.

You'd use it like this:

var msgContainer = document.createDocumentFragment();

for (var i = 0; i < response.data.length; i++) {
    msgContainer.appendChild(create("option", {
        text: response.data[i].name,
        value: response.data[i].id
    }));
}
document.getElementById("friends").appendChild(msgContainer);