【问题标题】：creating HTML elements with jQuery [closed]使用 jQuery 创建 HTML 元素 [关闭]
【发布时间】：2015-02-13 17:00:18
【问题描述】：

要动态创建 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/

【问题讨论】：

考虑改用模板引擎。
jquery 是一个库。
@DoctorMick，如果 OP 已经计划包含 jQuery，他们可能意味着一个 additional 库。不过，在有用的情况下，值得扩展网站以包含多个库。
@KyleMit - 是的，我想到了，但这只是我的一个小讨厌，仅次于将 jquery 称为语言的人。

标签： jquery html jquery-templates

【解决方案1】：

为什么不只是这样：

编辑

甚至更好：

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

【讨论】：

这如何回答这个问题？它永远不会产生 html <li data-id="1"><a>volvo</a></li>。困难在于将数组中的特定信息注入 HTML，而这甚至没有尝试。
@KyleMit 那么为什么不这样做呢？这是我第一个版本的修改版本。
我仍然会说这个答案在它有用之前还有一点路要走。这看起来与选项一中已经提出的解决方案 OP 非常相似。问题不是如何去做，而是哪个更好以及为什么。仅仅提供如何并不能回答为什么。它没有说明为什么他们应该选择这个答案而不是其他任何答案，或者使用已经提出的方法可以带来哪些性能优势。
哈哈。了解第一个downvote。即使在问题已经解决并且比接受的答案更有效的情况下，您也不是拒绝回答并留下答案的人，@KyleMit'

【解决方案2】：

为了提高性能，这将是更好的方法：

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。

【讨论】：

这两个答案都表明选项二优于选项一，但您建议不这样做。如果选项二表现更差，为什么有人会使用选项二？ stackoverflow.com/questions/11173589/…stackoverflow.com/questions/867916/…
因为人们关心代码的可读性而不是性能。我认为差异不会那么显着，除非您在 DOM 中有很多元素并且您进行了密集的 DOM 操作。就个人而言，我习惯使用 HTML 方式，它对我来说更具可读性。这只是习惯和偏好的问题。

【解决方案3】：

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

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，但它会进行深层复制。未经测试，但到底是什么......这很有趣。不过应该可以工作，并且具有不手写元素（如您所说）的好处……您正在创建初始“模板”节点，然后在必要时克隆它们，然后应用适当的属性/文本。非常清楚正在发生的事情，而且巧合地非常快。 :)

【讨论】：