Question

最近我一直在做很多模态窗口弹出窗口，而不是，我使用了jQuery。我用来在页面上创建新元素的方法绝大多数都是：

$("<div></div>");

但是，我觉得这不是最好或最有效的方法。从性能角度来看，在jQuery中创建元素的最佳方法是什么？

This answer有以下建议的基准。

Answer 1

我使用$(document.createElement('div')); Benchmarking shows这项技术最快。我推测这是因为jQuery不必将其识别为元素并自行创建元素。

您应该使用不同的Javascript引擎运行基准测试，并根据结果权衡受众群体。从那里做出决定。

Answer 2

我个人建议（为了便于阅读）：

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

Answer 3

问题：

使用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，请使用jQuery-1.7.2查看this example }使用上面的示例显示size属性设置为30但是使用相同的方法我们无法使用size设置jQuery-1.8.3属性，这里是{{3} }。因此，要设置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个版本中检查non-working fiddle但在jQuery-1.7.2 or earlier中this example（之前未进行过测试）的版本）。

BTW，摘自jQuery错误报告

有几种解决方案。首先是根本不使用它，因为它不会为你节省任何空间，这可以提高你的清晰度代码：

他们建议使用以下方法（won't work，并在1.6.4中测试）

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

所以，最好使用这种方法，IMO。此更新是在我阅读/找到works in earlier ones之后进行的，在此回答中显示，如果您使用'Size'(capital S)代替'size'，那么它只会this answer，即使在{{1} }}

version-2.0.2

另请阅读work fine，因为存在差异$('<input>', { 'type' : 'text', 'Size' : '50', // size won't work 'autofocus' : 'true' }).appendTo('body');，因版本而异。

Answer 4

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

（只需看看line 117）。

有一些函数调用开销，但除非性能至关重要（你创建了数百[数千]个元素），没有太多理由恢复到纯 DOM 。

只是为新网页创建元素可能就是您最好坚持 jQuery 做事方式。

Answer 5

如果你有很多HTML内容（不只是一个div），你可以考虑在隐藏容器中的页面中构建HTML，然后更新它并在需要时使其可见。这样，您的标记的很大一部分可以由浏览器预先解析，并避免在调用时被JavaScript陷入困境。希望这有帮助！

Answer 6

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

仅使用document.createElement('div')并跳过JQuery，可以在动态制作大量元素并附加到DOM时，大大提高性能。

Answer 7

我认为您使用的是最佳方法，但您可以将其优化为：

 $("<div/>");

Answer 8

从CPU的角度来看，您不需要从非常不频繁执行的操作中获得原始性能。

Answer 9

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

请记住，除非你真的要使用它，否则没有创建元素的真正目的。

您可能会尝试对$(document.createElement('div'))与$('<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');

您会注意到结果会有所不同。有时一种方式比另一种方式表现更好。这只是因为您计算机上的后台任务量随着时间的推移而变化。

<强> Test yourself here

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

Answer 10

有人已经制定了基准： jQuery document.createElement equivalent?

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

Answer 11

有一点是它可能更容易做到：

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

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

Answer 12

我正在使用jquery.min v2.0.3。对我来说，最好使用以下内容：

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);

第一个代码的处理时间远低于第二个代码。

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

12 个答案:

问题：

答案：