Question

我看到人们以两种不同的方式在jQuery中创建HTML元素：

$('<element>')

和

$('<element />')

我很好奇哪一个“更正确”。我看到第一个显而易见的优点是只是简单地输入。根本使用哪一个会有所不同吗？

Answer 1

没有区别，如源代码line 30＆amp; 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>') 可能实际上会稍快一点，因为它可以减少读取的字符数。哪个应该跳过一些Regex条件。

更好的是，如果您正在寻找使用jQuery的最快可能的方式：

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

这个版本速度最快，因为它跳过包含“new jQuery.fn.init（）”的jQuery()，并且不传递任何参数，以便它立即返回一个新的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)

Answer 4

这是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?

Answer 5

我在jsperf上运行了这两个，并发现两者之间在性能上的差异很小，所以我认为它最终会成为一个偏好问题，以及你正在创建哪个元素。我建议在jsperf上运行进一步的测试。

jsperf faq：http://jsperf.com/faq

最终结果：jsperf test

Answer 6

速记元素<element />需要斜杠，因为它替换<element> </element>。因此，为了有效标记，您可以在适当的位置编写。但它不需要是这样或那样的。

已修改：这实际上不是问题所在。这里的其他人似乎同意这是一个正则表达式的问题

$（'<element>'）vs jQuery </element> </element>中的$（'<element>'）

6 个答案: