$（ '<element> '）VS $（' <element />'）jQuery中

我看到人們在兩種不同的方式創造了jQuery的HTML元素：

$('<element>')

和

$('<element />')

我很好奇這一個是「更正確」。我認爲第一個顯而易見的好處在於只需簡單地輸入。所有使用哪一個都會有所不同？

來源

2012-03-12 GoldenNewby

，爲什麼你不能用'使用document.createElement（ '元素'）'？是否有一些法律迫使您儘可能慢地編寫代碼？！ – 2012-03-12 22:23:51

@tereško除非你基準測試這段代碼是應用程序中的瓶頸，否則性能不應該成爲這種選擇的主要因素。我期望性能差異僅在緊密循環中有關。但代碼的清晰度和一致性。如果你在大多數地方使用jquery，沒有理由在這裏使用DOM，並且如果你主要使用DOM，沒有理由爲此使用jquery。 – CodesInChaos 2012-03-12 22:31:41

@tereško+1 ...對象創建成本+字符串解析成本+許多條件成本+瘋狂設計模式成本= jQuery bill。 – Shea 2012-03-12 22:33:35

沒有區別，因爲在源代碼中看到，line 30 & line 121：

/* Line 30*/ 
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, 

/* Line 121 */ 
// If a single string is passed in and it's a single tag 
// just do a createElement and skip the rest 
ret = rsingleTag.exec(selector);

以下是等價：

<a></a>
<a />
<a>

來源

2012-03-12 22:09:05

當我寫這個問題的時候，我想我可以通過查看源代碼自己弄清楚。我很感謝你直接在你的答案中引用代碼。 – GoldenNewby 2012-03-12 22:17:03

所以，只要你在創建語句中沒有屬性**，沒有區別**。如果您將代碼更改爲'$（''）'，那麼任何人的瀏覽器.innerHTML都會解析它。 – 2016-04-25 14:26:07

不，根本沒有什麼區別，只要元素定義格式良好。第二種風格是簡單 an alternate syntax這實際上可以保存按鍵：

$('<a href="herp.derp.com/sherp"/>'); // XML-like syntax 
$('<a href="herp.derp.com/sherp"></a>'); // Well-formed HTML 
$('<a href="herp.derp.com/sherp">');  // Malformed (no closing tag)

來源

2012-03-12 22:07:49

這是一個有趣的關於如何在該應用程序它節省擊鍵。我一直只使用.attr來設置href。 – GoldenNewby 2012-03-12 22:14:33

這是一個愚蠢的例子，沒錯，但真實情況下，使用XML語法等於少打字。 – 2012-03-12 22:16:16

簡寫元件<element />需要，因爲它的替換<element> </element>斜線。所以爲了有效的標記，你應該在適當的地方寫出它。但它不一定是這樣或那樣。

編輯：這實際上並不是問題所在。別人在這裏似乎認爲它的正則表達式的性能問題

來源

2012-03-12 22:09:43 Kristian

它與真正的標記沒有任何關係。 jQuery的正則表達式在確定是否有空元素的時候搜索的模式更多，這會導致jQuery使用'document.createElement（）'。如果增加了更多內容，則將使用'.innerHTML'，並且有效性將變得更加重要。 – 2012-03-12 22:14:52

@amnotiam哦，我明白了。我立場糾正。 – Kristian 2012-03-12 22:19:11

技術上$('<element></element>')是比較正確的，因爲使用/在HTML5中除去自動關閉的標籤，但它使絕對沒有什麼區別，因爲語句的jQuery解析。如果有的話，只是使用$('<element>')可能實際上會稍微快一點，因爲它的字符少。哪個應該跳過一些正則表達式條件。

更好

的是，如果你正在尋找使用jQuery最快可能方式：

var temp = new jQuery.fn.init(); 
temp[0] = document.createElement('element'); 
temp.length = 1;

這個版本是最快的，因爲它會跳過jQuery()它包裝的「新jQuery.fn.init（）」，並且不傳遞任何參數，以便它立即返回一個新的jQuery對象。它跳過了很多條件和故障安全聲明，如果您已經確切知道您正在嘗試執行哪些操作，則這些聲明是不必要的。

或略短：

var temp = $(document.createElement('element'));

這個版本是稍微慢一些，但更容易閱讀，以及大量整潔。它仍然會跳過一大塊用於解析的代碼，這是一個正在傳遞的字符串。相反，jQuery可以自動知道我們在這裏使用節點。

參考
HTML5 Does NOT Allow 「Self-Closing」 Tags
Google: html5 self closing tags
jsperf

來源

2012-03-12 22:12:42 Shea

HTML5之前的HTML版本都沒有自閉標籤。 [它們在HTML5中是有效的]（http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag），但它對void元素沒有任何影響。 – 2014-06-10 14:57:52

這就是jQuery docs說些什麼：

爲了確保跨平臺的兼容性，必須很好地形成的片段。

$('<a href="http://jquery.com"></a>');

或者，jQuery的允許類似於XML的標記語法（帶或不帶斜線前的空間）：：

$('<a/>');
可以包含其他的元素的標籤應以結束標記配對不能包含元素
標籤可以被快速關閉或並未：

$('<img />'); $('<input>');

看到這個問題，但是，對什麼是最有效的：

What is the most efficient way to create HTML elements using jQuery?

來源

2012-03-12 22:14:04

我跑這兩個對jsperf，發現這兩個性能之間的細微差別，所以我假設它最終會成爲一個偏好問題，並且你正在創建哪個元素。我建議在jsperf上運行進一步的測試。

jsperf常見問題：http://jsperf.com/faq

最終結果是：jsperf test

來源

2012-03-12 22:15:44 ArkahnX

$（ '<element> '）VS $（' <element />'）jQuery中

回答

相關問題