使用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作事方式的一種狀況。