javascript - 使用 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);