问题:

使用jQuery创建HTML元素的最有效方法是什么?

答:

因为它是关于jQuery的，那么我认为最好使用这种(干净的)方法(你正在使用)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

演示。

这样，您甚至可以为特定的元素使用事件处理程序，例如

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

演示。

但是当你处理大量的动态元素时，你应该避免在特定的元素中添加事件处理程序，相反，你应该使用一个委托的事件处理程序，比如

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

演示。

因此，如果您使用相同的类(即myClass)创建并添加数百个元素，则事件处理将消耗更少的内存，因为只有一个处理程序将在那里为所有动态插入的元素完成工作。

更新:因为我们可以使用以下方法来创建一个动态元素

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

但是size属性不能使用这种方法使用jQuery-1.8.0或更高版本来设置，这是一个旧的错误报告，看看这个使用jQuery-1.7.2的例子，它显示使用上面的例子size属性被设置为30，但使用相同的方法我们不能使用jQuery-1.8.3设置size属性，这是一个无效的错误。因此，要设置size属性，可以使用以下方法

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

或者这个

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

我们可以将attr/prop作为子对象传递，但它在jQuery-1.8.0和更高版本中工作，但它在jQuery-1.7.2或更早版本中不起作用(在所有早期版本中都没有测试过)。

BTW，摘自jQuery bug报告

有几种解决方案。第一种是完全不使用它，因为 它不节省你的任何空间，这提高了清晰度 代码:

他们建议使用以下方法(在早期的版本中也适用，在1.6.4中测试过)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

所以，在我看来，最好使用这种方法。这个更新是在我阅读/发现这个答案后进行的，在这个答案中显示，如果你使用“Size”(大写S)而不是“Size”，那么它就可以正常工作，即使在版本-2.0.2中

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

还要阅读prop，因为有区别，属性和属性，它在不同的版本中有所不同。

我认为你使用了最好的方法，尽管你可以优化它:

 $("<div/>");

实际上，如果你使用$('<div>')， jQuery也会使用document.createElement()。

(看一下第117行)。

有一些函数调用开销，但除非性能非常关键(您要创建数百[数千]个元素)，否则没有太多理由恢复到纯DOM。

只是为一个新网页创建元素可能是一种情况下，你最好坚持用jQuery的方式做事情。

有人已经做了一个基准: jQuery文档。createElement等价?

$(document.createElement('div'))是最大的赢家。

有一点可能更容易做到:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

然后用jquery调用完成所有这些。

我个人建议(为了可读性):

$('<div>');

目前建议的一些数字(safari 3.2.1 / MAC OS x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms