1. This is very fast
var citySelect = document.getElementById('city_id'),
selectOption = null,
ops = "",
c = [],
docFrag = null;

docFrag = document.createDocumentFragment();
selectOption = document.createElement('option');

for (var city in cities) {
ops = selectOption.cloneNode("false");
ops.value = city;
ops.text = cities[city];
docFrag.appendChild(ops);
};

citySelect.appendChild(docFrag.cloneNode("true"));

2. Removing the element from the DOM and adding it back in is very fast (of course, you lose your attached events)
var citySelect = document.getElementById('city_id'),
c = document.getElementById('city'),
selectOption = null,
ops = "";

selectBox = document.createElement("select");
selectBox.id = 'city_id';
selectBox.name = 'name_id';
selectOption = document.createElement('option');

for (var city in cities) {
ops = selectOption.cloneNode("false");
ops.value = city;
ops.text = cities[city];
selectBox.appendChild(ops);
};

c.removeChild(citySelect);
c.appendChild(selectBox);

3. This is extremely quick for clearing the select options array
Array.prototype.splice.call(selectbox.options, 0);

This post was mentioned on Reddit by maritz: Creating an array and then joining this array is faster than just concatenating the string? That is fucked up.

But very good to know. Thanks.
I'll have to test this on Node, to see if it's the same the...


var selectArr = new Array();
for (var i = 0; i < 8000; i++) {
selectArr.push(i);
}
container.innerHTML +=
"<select>&ltoption>" +
selectArr.join("</option>&ltoption>") +
"</select>&lt/option>";


var selectArr = new Array();
for (var i = 0; i < 8000; i++) {
selectArr.push(i);
}
container.innerHTML +=
"" +
selectArr.join("") +
"";