使用Jquery创建新DOM元素的最佳方法

Question

is it better to create a DOM element like this:-

            var option='';
            var objY = $('select[name="yaxis"]');
            for(var key in summaryObj)
            {
                option += '<option value="'+summaryObj[key]+'">'+key+'</option>';
            }
            objY.html(option);

or like this,

            var objY = $('select[name="yaxis"]');
            var option = document.createElement("option");
            for(var key in summaryObj)
            {
                var san = summaryObj[key];
                objY.append($(option).clone().attr({value:san,text:key}));
            }

Answer 1

For perfomance, this is probably among the fastest ways

var option = document.createElement("option");
var frag   = document.createDocumentFragment();

for (var key in summaryObj) {
    var clone = option.cloneNode();
    clone.value = san;
    clone.innerHTML = key;

    frag.appendChild(clone);
}

$('select[name="yaxis"]').append(frag);

For readability, I like this

var objY = $('select[name="yaxis"]');
var frag = [];

$.each(summaryObj, function(key, val) {
    frag.push(
        $('<option />', {
            value : san,
            text  : key
        })
    );
});

objY.append(frag);

Answer 2

In jQuery, you Do it like this:

var select = $('<select>').attr('name','yaxis');
var option = $("<option>");
option.text('word').value('word');
select.append(option);