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

Question

创建这样的DOM元素是否更好：-

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

或像这样

            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

对于性能而言，这可能是最快的方法之一

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);

为了提高可读性，我喜欢这样

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

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

objY.append(frag);

Answer 2

在jQuery中，您可以这样操作：

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