修改

Question

要动态创建html（不使用模板库），我有两个选择。以下哪项受到青睐？为什么？

var cars = [{"id": 1, "name": "volvo"},
            {"id": 2, "name": "nissan"},
            {"id": 3, "name": "audi"}];
for (i = 0; i < cars.length; i++){

    //Option one
    var html = "<li data-id="+cars[i].id+"><a>"+cars[i].name+"</a></li>";
    $('#result-one').append(html);

    //Option two    
    var $el = $('<li/>',{
        'data-id' : cars[i].id
    }).append(
        $('<a/>',{
            text : cars[i].name
        })
    );    
    $('#result-two').append($el);
}

http://jsfiddle.net/joepegler/xk4fumgz/3/

Answer 1

为了表现，这将是更好的方式：

var cars = [{"id": 1, "name": "volvo"},
            {"id": 2, "name": "nissan"},
            {"id": 3, "name": "audi"}];
var html = "";
for (i = 0; i < cars.length; i++){

   var html += "<li data-id="+cars[i].id+"><a>"+cars[i].name+"</a></li>";

}

$('#result-one').append(html);

这样你的追加只有一次。它越少追求更高性能。

http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551 提示＃7。

Answer 2

尽管使用了库，但我们尝试不使用库！

var cars = [
        {
            id:1,
            name:'volvo'
        },
        {
            id:2,
            name:'nissan'
        },
        {
            id:3,
            name:'audi'
        }
    ],
    result = document.getElementById('result-two'),
    mainLi = document.createElement('li'),
    mainA = document.createElement('a'),
    setText(function(){
        if('textContent' in document){
            return function(el,text){
                el.textContent = text;
            };
        } else if('innerText' in document){
            return function(el,text){
                el.innerText = text;
            };
        } else {
            return function(el,text){
                el.innerHTML = text;
            };
        }
    })();

for (var i = 0, len = cars.length; i < len; i++){
    var li = mainLi.cloneNode(false),
        a = mainA.cloneNode(false);

    li.setAttribute('data-id',cars[i].id);
    setText(a,cars[i].name);

    li.appendChild(a);    
    result.appendChild(li);
}

然后，如果你想复制和粘贴：

var copy = result.cloneNode(true);

虽然您要更改新节点的id，但深层副本是哪一个。未经测试，但到底是什么......这很有趣。应该工作，并且有很好的好处，不用手写出元素（正如你所说的那样）......你正在创建初始＆＃34;模板＆＃34;节点，然后在必要时克隆它们，然后应用适当的属性/文本。很清楚什么是发生的，巧合的是非常快。：）

Answer 3

为什么不呢：

修改

甚至更好：

var items = '';
for (i = 0; i < cars.length; i++){
   items += '<li data-id="'+cars[i].id+'"><a>'+cars[i].name+'</a></li>';
}
$('#result-two')[0].innerHTML = items;

这一点，因为它更容易打字并且性能更高 - 它也比$('#el').html()和$('#el').append(stuff)更快。 jsperf

使用jQuery创建HTML元素

3 个答案:

修改