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

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

 $("<div/>");

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

$('<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

我使用$(document.createElement('div')); 基准测试显示这种技术是最快的。我推测这是因为jQuery不需要将其标识为元素并自己创建元素。

您应该使用不同的Javascript引擎运行基准测试，并根据结果来衡量您的受众。然后再做决定。

从CPU的角度来看，您不需要一个极少执行的操作的原始性能。

如果您有很多HTML内容(不仅仅是一个div)，您可以考虑将HTML构建到隐藏容器中的页面中，然后更新它并在需要时使其可见。这样，浏览器就可以预先解析大部分标记，避免在调用时被JavaScript缠住。希望这能有所帮助!

这不是问题的正确答案，但我仍然想分享这个……

当你想要动态生成大量元素并附加到DOM时，只使用document.createElement('div')而跳过JQuery将大大提高性能。

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

(只要看看第117行)。

有一些函数调用开销，但除非性能非常关键(你要创建成百上千个元素)，否则没有太多理由恢复为普通的DOM。

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

有一点可能更容易做到:

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

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

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

您必须首先理解，在使用jQuery的上下文中，元素创建性能的重要性是无关紧要的。

请记住，创建一个元素没有真正的目的，除非您真的要使用它。

你可能会被诱惑去测试诸如$(document.createElement('div')) vs. $('<div>')之类的东西，并从使用$(document.createElement('div'))中获得巨大的性能提升，但这只是一个还没有在DOM中的元素。

然而，在一天结束的时候，你还是会想要使用元素，所以真正的测试应该包括f.ex. appendto ();

让我们看看，如果你将以下内容进行对比测试:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

你会注意到结果会有所不同。有时一种方法比另一种更好。这只是因为你的电脑上后台任务的数量随着时间的推移而变化。

在这里测试你自己 .

因此，在一天结束时，您确实希望选择最小和最可读的方式来创建元素。这样，至少您的脚本文件将尽可能小。在性能方面，这可能是比在DOM中使用元素之前创建元素的方式更重要的因素。

问题:

使用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或以后的版本来设置，这里是一个旧的错误报告，看看使用jQuery-1.7.2的这个例子，它显示size属性使用上面的例子被设置为30，但使用相同的方法我们不能使用jQuery-1.8.3设置size属性，这里是一个jQuery-1.8.00。因此，要设置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中不会起作用(在所有早期版本中都未测试)。

BTW，摘自jQuery错误报告

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

他们建议使用以下方法(也是在早期作品中，在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');

还要阅读有关道具的内容，因为有一个区别，Attributes vs. Properties，它在不同的版本中有所不同。

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

如下:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

第一段代码的处理时间比第二段代码要短得多。