jQuery 中的 $('<element>') 与 $('<element />')答案

【问题标题】：$('<element>') vs $('<element />') in jQueryjQuery 中的 $('<element>') 与 $('<element />')
【发布时间】：2023-03-20 09:18:02
【问题描述】：

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

$('<element>')

和

$('<element />')

我很好奇哪个“更正确”。我认为第一个的明显优势是打字更少。使用哪一个有区别吗？

【问题讨论】：

为什么不能使用document.createElement('element')？是否有一些法律迫使您编写尽可能慢的代码？！
@tereško 除非您对这段代码进行基准测试，认为这段代码是您应用程序的瓶颈，否则性能不应成为此选择的主要因素。我希望性能差异仅在紧密循环中相关。而是代码的清晰性和一致性。如果大部分地方使用jquery，这里没有理由使用DOM，如果你主要使用DOM，则没有理由为此使用jquery。
@tereško +1... 对象创建成本 + 字符串解析成本 + 许多条件成本 + 疯狂设计模式成本 = jQuery 账单。

标签： jquery

【解决方案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>

【讨论】：

当我写这个问题时，我在想我可以通过查看源代码自己弄清楚。感谢您在答案中直接引用代码。
所以，没有区别只要你在创建语句中没有属性。如果您将代码更改为$('<a name="foo">')，那么任何人的浏览器 .innerHTML 都会解析它。

【解决方案2】：

从技术上讲$('<element></element>') 更正确，因为使用/ 的自闭合标签在HTML5 中被删除，但它完全没有区别，因为该语句是由jQuery 解析的。如果有的话，仅仅使用$('<element>') 可能实际上会稍微快一些，因为它的阅读字符更少。这也应该跳过一些正则表达式条件。

如果您正在寻找使用 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

【讨论】：

在 HTML5 之前的任何 HTML 版本都没有自闭合标签。 They are valid in HTML5 但对 void 元素没有影响。

【解决方案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)

【讨论】：

关于如何在该应用程序中节省击键，这是一个有趣的观点。我一直只是使用 .attr 来设置 href。
这是一个愚蠢的例子，没错，但在实际情况下，使用 XML 语法等于减少输入。

【解决方案4】：

jQuery docs 是这么说的：

为确保跨平台兼容性，sn-p 必须格式正确。可以包含其他元素的标签应与结束标签配对：

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

或者，jQuery 允许类似 XML 的标记语法（斜杠前有或没有空格）：

$('<a/>');

不能包含元素的标签可以快速关闭也可以不：

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

但是，请参阅这个问题，了解什么是最有效的：

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

【讨论】：

【解决方案5】：

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

jsperf 常见问题解答：http://jsperf.com/faq

最终结果：jsperf test

【讨论】：

【解决方案6】：

速记元素<element /> 需要斜杠，因为它替换了<element> </element>。因此，为了有效的标记，您可以在适当的地方编写它。但它不需要是一种或另一种方式。

已编辑：这实际上不是问题。这里的其他人似乎同意这是正则表达式性能的问题

【讨论】：

它与有效标记没有任何关系。更多的是 jQuery 的正则表达式在确定是否需要空元素时搜索的模式，这将导致 jQuery 使用document.createElement()。如果再添加任何内容，则将使用.innerHTML，并且有效性将更加重要。