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

我用 $(document.createElement('div')); Benchmarking shows 这种技术是最快的。我推测这是因为jQuery不必将其标识为元素并创建元素本身。

您应该使用不同的Javascript引擎运行基准测试,并用结果衡量您的受众。从那里做出决定。

$('<div>');

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

$('<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 大小 30 使用上述示例,但使用相同的方法,我们无法设置 大小 属性使用 jQuery-1.8.3 non-working fiddle . 那么,设置 属性,我们可以使用以下方法

$('<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 但是它 won't work 在里面 jQuery-1.7.2 or earlier

顺便说一句,取自 错误报告

有几种解决方案。首先是根本不使用它,因为 它不会为您节省任何空间,这提高了图像的清晰度 代码:

他们建议采用以下方法( works in earlier ones 1.6.4 )

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

this answer 这个答案表明,如果你使用 'Size'(capital S) 'size' work fine ,即使在 version-2.0.2

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

还了解 prop ,因为有区别, Attributes vs. Properties ,它因版本而异。

$('<div>') document.createElement() .

(看一看 line 117

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

仅仅为一个新网页创建元素可能是你最好坚持的一种情况

这不是问题的正确答案,但我还是想和大家分享一下。。。

仅使用 document.createElement('div')

我认为您使用的是最好的方法,尽管您可以将其优化为:

 $("<div/>");

从CPU的角度来看,您不需要执行极不频繁的操作的原始性能。

您必须理解,元素创建性能的重要性在最初使用jQuery的上下文中是不相关的。

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

您可能会尝试进行如下性能测试 $(document.createElement('div')) vs。 $('<div>') 并通过使用 但这只是一个尚不在DOM中的元素。

让我们看看,如果你测试以下内容:

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中使用元素之前创建元素的方式相比,性能方面的一个重要因素可能更重要。

有人已经制定了一个基准: jQuery document.createElement equivalent?

$(document.createElement('div'))

一点是,这样做可能更容易:

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

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

我正在使用jquery.minv2.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);

第一个代码的处理时间比第二个代码低得多。