最近我做了很多模态窗口弹出之类的事情,为此我使用了jQuery。我用来在页面上创建新元素的方法基本上是这样的:

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

然而,我感觉这并不是最好或最有效的方法。从性能的角度来看,用jQuery创建元素的最佳方法是什么?

这个答案有以下建议的基准。


当前回答

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

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

其他回答

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

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

有一点可能更容易做到:

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

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

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

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

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

(看一下第117行)。

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

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

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

 $("<div/>");