问题：
使用 jQuery 创建 HTML 元素最有效的方法是什么？
答案：
既然是关于jQuery，那么我认为最好使用这种（干净的）方法（你正在使用）
$('<div/>', {
'id':'myDiv',
'class':'myClass',
'text':'Text Only',
}).on('click', function(){
alert(this.id); // myDiv
}).appendTo('body');
DEMO.
这样，您甚至可以为特定元素使用事件处理程序，例如
$('<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');
DEMO.
但是当您处理大量动态元素时，应避免在特定元素中添加事件handlers，而应使用委托事件处理程序，例如
$(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');
}
DEMO.
因此，如果您创建并附加数百个具有相同类的元素，即 (myClass)，那么事件处理将消耗更少的内存，因为只有一个处理程序可以为所有动态插入的元素完成这项工作。
更新：因为我们可以使用以下方法来创建动态元素
$('<input/>', {
'type': 'Text',
'value':'Some Text',
'size': '30'
}).appendTo("body");
但是size 属性不能使用jQuery-1.8.0 或更高版本使用这种方法设置，这是一个旧的bug report，请查看this example 使用jQuery-1.7.2，这表明size 属性已设置到30 使用上面的例子，但使用相同的方法我们不能使用jQuery-1.8.3 设置size 属性，这里是non-working fiddle。因此，要设置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 and later 版本检查this example 但它在jQuery-1.7.2 or earlier 中won't work（未在所有早期版本中测试）。
顺便说一句，取自 jQuery 错误报告
有几种解决方案。首先是根本不使用它，因为
它不会为您节省任何空间，并且可以提高清晰度
代码：
他们建议使用以下方法（works in earlier ones 也是，在 1.6.4 中测试过）
$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
所以，最好使用这种方法，IMO。此更新是在我阅读/找到this answer 之后进行的，并且在此答案中显示，如果您使用'Size'(capital S) 而不是'size'，那么即使在version-2.0.2 中，它也只会是work fine
$('<input>', {
'type' : 'text',
'Size' : '50', // size won't work
'autofocus' : 'true'
}).appendTo('body');
另请参阅prop，因为有区别，Attributes vs. Properties，它因版本而异。