$（ '<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中

回答

相关问题