Question

There is some strangeness while I create in JavaScript Select element:

var items = {"3":"Three","1":"One","2":"Two"};
var elem = document.createElement("select");

for ( var key in items) {
    var ov = document.createElement("option");
    ov.value = key; 
    ov.appendChild(document.createTextNode(items[key]))
    elem.appendChild(ov);
}

document.getElementById('someDiv').appendChild(elem);

FF create Select element with initial elements order (Three, One, Two).
Chrome sorts elements by key and output in next way (One, Two, Three).

Why this happen? And how prevent sorting in Chrome?

Answer 1

The for … in statement iterates over an object in an unpredictable order. As MDC says:

A for...in loop iterates over the
properties of an object in an
arbitrary order (see the delete
operator
for more on why one cannot depend on
the seeming orderliness of iteration,
at least in a cross-browser setting).

You’d better use an array of objects and use an ordinary for loop to keep the specified order, like:

var items = [{"3":"Three"}, {"1":"One"}, {"2":"Two"}];

for (var i = 0; i < items.length; i++}
    /* etc */ ;

Just a side note: when iterating over object using for … in, you really should use hasOwnProperty to check whether it is an inherited property or not, otherwise you might include inherited properties in your select box.