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

最近，我一直在作不少模态窗口弹出窗口，而我没有使用jQuery。 我用来在页面上建立新元素的方法绝大多数遵循如下原则：

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

可是，我感到这不是执行此操做的最佳或最有效的方法。 从性能的角度来看，在jQuery中建立元素的最佳方法是什么？

该答案具备如下建议的基准。

---

#1楼

您必须了解，元素建立性能的重要性与首先使用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');

您会注意到结果会有所不一样。 有时，一种方法比另外一种方法更好。 这仅是由于计算机上的后台任务数量会随着时间而变化。

在这里测试本身

所以，最终，您确实想选择一种最小且最易读的建立元素的方式。 这样，至少，您的脚本文件将最小。 与在DOM中使用元素以前建立元素的方式相比，性能点上的影响可能更大。

---

#2楼

题：

使用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');
}

演示。

所以，若是您建立并附加数百个具备相同类的元素，即（ myClass ），则用于事件处理的内存将更少，由于只有一个处理程序能够为全部动态插入的元素完成该工做。

更新：因为咱们可使用如下方法来建立动态元素

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

可是使用jQuery-1.8.0或更高版本没法使用这种方法设置size属性，这是一个旧的错误报告 ，请使用jQuery-1.7.2查看此示例 ， 该示例显示使用以上示例将size属性设置为30可是使用相同的方法，咱们没法使用jQuery-1.8.3设置size属性，这是一个无效的小提琴 。 所以，要设置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错误报告

有几种解决方案。 首先是根本不使用它，由于它不会节省您任何空间，而且能够提升代码的清晰度：

他们建议使用如下方法（也适用于较早的方法，在1.6.4进行了测试）

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

所以，最好使用这种方法，IMO。 此更新是在我阅读/找到此答案以后进行的，而且在此答案中显示，若是您使用'Size'(capital S)而不是'size'那么即便在version-2.0.2 ，它也能够正常工做

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

另请阅读有关prop的内容 ，由于Attributes vs. Properties是有区别的，因版本而异。

---

#3楼

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

当您想动态制做大量元素并追加到DOM时，仅使用document.createElement('div')并跳过JQuery能够大大提升性能。

---

#4楼

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

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

---

#5楼

实际上，若是您正在执行$('<div>') ，jQuery也将使用document.createElement() 。

（只需看一下第117行 ）。

有一些函数调用开销，可是除非性能相当重要（要建立成百上千个元素），不然没有太多理由恢复为纯DOM 。

仅为新网页建立元素多是您最好坚持使用jQuery作事方式的一种状况。