什么是使用jQuery创建HTML元素的最有效方法？
最近我一直在做很多模式窗口弹出窗口，而不是，我使用jQuery。 我用来在页面上创建新元素的方法绝大多数都是这样的：
$("<div></div>");
但是，我感觉这不是最好的或最有效的方法。 从性能的角度来看，在jQuery中创建元素的最佳方式是什么？
这个答案有以下建议的基准。
我使用$(document.createElement('div')); 基准测试显示这种技术是最快的。 我推测这是因为jQuery不必将其标识为元素并自己创建元素。
您应该使用不同的Javascript引擎来运行基准测试，并将结果与受众进行权衡。 从那里做出决定。
我个人建议（为了可读性）：
$('<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
题：
什么是使用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报告，使用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 and later版本中可用，请检查此示例，但它不适用于jQuery-1.7.2 or earlier （未在所有早期版本中测试过）。
顺便说一句，取自jQuery bug报告
有几种解决方案。 首先是根本不使用它，因为它不会节省任何空间，并且这会提高代码的清晰度：
他们建议采用以下方法（也适用于早期的方法，在1.6.4进行了测试）
$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
所以，最好使用这种方法，海事组织。 这个更新是在我阅读/发现这个答案后作出的，并且在这个答案中显示，如果你使用'Size'(capital S)而不是'size'那么即使在version-2.0.2它也能正常工作
$('<input>', {
'type' : 'text',
'Size' : '50', // size won't work
'autofocus' : 'true'
}).appendTo('body');
还要阅读有关prop的内容，因为它们有所不同， Attributes vs. Properties有所不同，因此版本会有所不同。
上一篇: What is the most efficient way to create HTML elements using jQuery?