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

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

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

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

此答案具有以下建议的基准。

也尝试删除样式，看看是否可以加快速度。我发现CSS应用程序和更新对我来说在大页面上减慢最快的速度。

提防过早的优化-如果您一次不对数百个DOM元素执行此操作，或者不使用非常旧的浏览器，那么您可能不会注意到浏览器性能的任何差异。

@Blazemonger并不是很多，我需要一种更有效的创建DOM元素的方法，但是我所处的状况让我思考了替代品的含义以及替代品的效率。

jQuery是一个库–出于这个原因，您几乎总是会产生开销的性能成本：就像通过解释器与某人交谈。除非您要使用原始JavaScript，否则请充分利用编写$（'

'）并接受性能提升的速度。

jsben.ch/#/bgvCV <=此基准应该回答您的问题

#1 楼

我使用$(document.createElement('div'));基准测试表明该技术是最快的。我推测这是因为jQuery不必将其标识为元素，也不必自己创建元素。

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

jQuery将其“附加”到DOM？哪里？这对我来说没有多大意义-div会去哪里？

–更强
08年11月29日在3:12

就像在javascript中一样，必须在jquery中添加创建的div。 $（'

'）本身不会附加到DOM，除非您将其附加到某些东西上。

–欧文
08年11月29日在4:44

@David-显然你是对的。我会注意到，大约2年前我刚开始学习jQuery时就添加了评论。您将需要执行一个appendTo，...由于注释显然是错误的，因此我将其删除。

– tvanfosson
2010-09-08 13:23

基准测试参考很棒，但这也正在测试数以万计的元素的创建。在典型情况下，您什么时候才能处理这么多要素？与创建元素相比，您有更大的事情要担心。 “ document.createElement”在0.097秒内运行39,682次“，而$（'

'）”在0.068秒内运行12,642次。“我想说的是，如果某事物可以在不到一秒钟的时间内运行数千次，那么您是安全的。

–丹尼·布利斯（Danny Bullis）
13年4月15日在2:11

此外，使用$（document.createElement（'div'））;我要说的是效率较低，因为如果一次到处只创建一个元素，那么花费较长的时间才能在浏览器中获得很大的好处。从技术上讲，由于查找成本以及使用它所产生的开销，jQuery本身作为库的效率较低。如果有人打算使用document.createElement而不是$（'

'）来节省千分之一毫秒，那么他们不应该使用jQuery：]，因为$（'

'）是您使用它的原因之一！

–丹尼·布利斯（Danny Bullis）
13年4月15日在2:24

#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

来自jquery文档：'当创建单个元素时，请使用结束标记或XHTML格式。例如，要创建跨度，请使用$（“ ”）或$（“ ”）而不是不使用斜杠/标记。

– tvanfosson
08年11月29日在2:46

@Owen，这种行为是错误，而不是功能。垃圾进，垃圾出-碰巧您得到的垃圾是可以接受的。但是，不要在jQuery版本之间依赖它，除非函数的规范发生变化。

–更强
08年11月29日在5:15

不出所料，在Mac OS X Chrome（100毫秒用于createElement（）与500毫秒的文本解析）和Mac OS X Firefox（350毫秒与1000毫秒）中看到了相似的数字。感谢您编写测试循环。

– Annika Backstrom
2010-2-5在14:15

@tvanfosson显然已经改变了，在当前文档中它说：“当参数具有单个标签（带有可选的关闭标签或快速关闭）时— $（“ ”）或$（“ ” ），$（“ ”）或$（“ ”）— jQuery使用本机JavaScript createElement（）函数创建元素。”

– Metaatron
2013年12月5日13:05

@MarcStober没有采取任何进攻。它仍然在这里：http://api.jquery.com/jQuery/#jQuery2。该文档提到了可选的结束标记或快速关闭

– Metaatron
2015年2月23日在9:14

#3 楼

问题：

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

答案：

自这是关于jQuery的问题，那么我认为最好使用这种（干净的）方法（您正在使用）

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

这样，您甚至可以为特定元素使用事件处理程序，例如

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

但是当您处理大量动态元素时，应该避免在特定元素中添加事件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");

但是q43120无法使用size或更高版本使用此方法设置79q属性，这是旧的错误报告，请使用jQuery-1.8.0查看此示例，该示例显示使用以上示例将jQuery-1.7.2属性设置为size，但是使用相同的方法，我们无法设置30使用size的属性，这是一个无效的小提琴。因此，要设置jQuery-1.8.3属性，我们可以使用以下方法

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

或者这一个

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

我们可以将size作为子对象传递，但是在attr/prop版本中可以使用，请检查此示例，但在jQuery-1.8.0 and later中将不起作用（未在所有早期版本中进行测试）。

BTW，摘自jQuery-1.7.2 or earlier错误报告

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

他们建议使用以下方法（也可以在早期版本中使用，并且已在jQuery中进行了测试）

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

因此，最好使用这种方法，IMO。此更新是在我阅读/找到此答案之后进行的，并且在此答案中显示，如果您使用1.6.4而不是'Size'(capital S)，则即使在'size'中它也可以正常工作

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

>还请阅读有关prop的内容，因为存在差异version-2.0.2，因版本而异。

$（'

'，{.........}）是什么类型的罪过，我一直在寻找它，并使用$（'

）。attr（ {......}）？

–拉斐尔·鲁伊斯·塔巴雷斯（Rafael Ruiz Tabares）
2015年5月9日17:52

@RafaelRuizTabares，在$（'

'，{...}）中传递包含所有属性的对象，并在$（'

'）。attr（{...}）中传递一个没有任何属性但稍后使用attr（）方法设置属性的元素。

– Alpha
2015年5月9日20:39

@TheAlpha在哪里可以找到有关我可以在{}中编写的内容的信息？因为我看到它们是属性和事件，但对于

，您也使用html。谢谢！

–拉斐尔·鲁伊斯·塔巴雷斯（Rafael Ruiz Tabares）
2015年5月11日15:34

搜索jQuery.com网站可能对@RafaelRuizTabares有所帮助，或者对它进行Google搜索:-)

– Alpha
15年5月11日在18:22

到目前为止，这是最干净，更易读的方式！可能不是最快的方法，但肯定会减少错误，因此容易添加字符串。谢谢@TheAlpha

–亩
17年6月2日10:00

 $("<div/>");

#8 楼

从CPU的角度来看，您不需要从原始操作中获得原始性能的操作。

取决于您执行的频率。

–富有的布拉德肖
2010年3月1日在21:31

OP正在创建模式弹出窗口。每秒不重复执行此操作数千次。相反，它可能最多每隔几秒钟重复一次。使用jQuery（html :: String）方法非常好。除非情况非常不寻常，否则不可能获得更好的感知性能。将优化精力花在可以使用的案例上。此外，jQuery在许多方面都针对速度进行了优化。用它来做理智的事情，并且信任但要验证它很快。

– yfeldblum
10 Mar 2 '10 at 2:33

#9 楼

您必须了解，元素创建性能的重要性与首先使用jQuery无关。

请记住，除非您确实有创建元素的实际目的，

您可能会想对$(document.createElement('div'))与$('<div>')之类的东西进行性能测试，并通过使用$(document.createElement('div'))获得巨大的性能提升，但这只是DOM中尚不存在的一个要素。 br />
但是，最终还是要使用元素，因此实际测试应包括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：document.getElementById（'target）.appendChild（document.createElement（'div'））;

–敬畏
17 Mar 8 '17 at 17:18

#10 楼

有人已经做了一个基准测试：
等同于jQuery document.createElement？

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

#11 楼

一点是，这样做可能会更容易：

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

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

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

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

适用于高级PHP开发人员的MVC [关闭]

jQuery选择器中的通配符

编程黑洞网

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

评论

#1 楼

评论

#2 楼

评论

#3 楼

评论

#4 楼

#5 楼

评论

#6 楼

#7 楼

#8 楼

评论

#9 楼

评论

#10 楼

#11 楼

#12 楼