jQuery中的$('<element>') vs $('<element />')

Question

我看到人们用两种不同的方式在jQuery中创建超文本标记语言元素：

$('<element>')

和

$('<element />') 

我很好奇哪一个更“正确”。我认为第一种方法的明显优势在于它只需要更少的输入。使用哪一个会有区别吗？

Answer 1

正如在源代码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>

Answer 2

从技术上讲，$('<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

Answer 3

不，只要元素定义是格式良好的，这没有任何区别。第二种风格是简单的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)