jquery $('<div>') vs $('<div />') [重复]答案

【问题标题】：jquery $('<div>') vs $('<div />') [duplicate]jquery $('<div>') vs $('<div />') [重复]
【发布时间】：2012-05-11 06:25:00
【问题描述】：

可能重复：
$('<element>') vs $('<element />') in jQuery

这两种方法中哪一种是正确的：

$('<div>')

或

$('<div />')

它们似乎都有效。是一种方法比另一种方法更正确，还是它们都总是有效？

【问题讨论】：

无论如何我都会选择正确的 html。
我同意。当我看到第二个时，我总是觉得它不对。

标签： javascript jquery

【解决方案1】：

它们在 jQuery 中产生相同的结果。

【讨论】：

所以它们总是适用于所有元素？
是的。第二种形式是有效的 XHTML/HTML 4，第一种是 HTML5，无论哪种方式，jQuery 都会产生相同的输出。
就我而言...为什么不直接做：$("div")？
@cereallarceny 这是一个选择器——OP 询问是否创建新的 jQuery 对象/DOM 元素。
doctypes 真的与它无关。 jQuery 只是使用一个正则表达式来查看是否传递了一个空标签。正则表达式将接受<div>、<div/> 或<div></div>（可能有一些空白），无论元素类型如何，如果匹配，它使用document.createElement 生成元素。

【解决方案2】：

来自docs：

如果一个字符串作为参数传递给 $()，jQuery 会检查字符串以查看它是否看起来像 HTML（即，它在某处有 <tag ... > 在字符串中）。如果不是，则字符串被解释为选择器表达式，如上所述。但是如果字符串看起来是 HTML sn-p，jQuery 尝试按照描述创建新的 DOM 元素通过 HTML。然后创建并返回一个引用的 jQuery 对象对这些元素。您可以执行任何常用的 jQuery 方法这个对象：

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

如果 HTML 比没有属性的单个标签更复杂，因为它在上面的例子，元素的实际创建是由浏览器的innerHTML 机制。在大多数情况下，jQuery 会创建一个新的元素并将元素的 innerHTML 属性设置为传入的 HTML sn-p。当参数有单个标签时，比如$('<img />') or $('<a></a>')，jQuery使用创建元素原生 JavaScript createElement() 函数。

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

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

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

$('<a/>');

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

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

【讨论】：

【解决方案3】：

虽然看起来它们产生了相同的结果，但根据用途，它们可能不会产生相同的结果。例如：

当 jQuery 解析 $('<div> <p>') 时，<p> 标记将是<div> 标记的子，因此结果将是：<div> <p></p> </div>

当 jQuery 解析 $('<div/> <p/>') 时，<p/> 标签将是 <div/> 标签的 sibling，因此结果将是：<div></div> <p></p>

【讨论】：

关于避免对代码的作用产生误解的好方法。这是我看到的使用
语法的唯一论据，我现在会坚持下去。即使只做一个元素时它并不适用，但在整个代码中保持一致仍然是件好事。

【解决方案4】：

两种变体都给你相同的结果，但是这个

$('<div />', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});

比

更好，更易读

$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');

【讨论】：