哪个是使用 jQuery 创建新元素的正确或更好的方法？

Question

与答案https://stackoverflow.com/a/10619477/1076753相关的cate an element 比较好用

$("<div>", {id: "foo", class: "a"});

或

$("<div />", {id: "foo", class: "a"});

它们都有效，但哪个更好或更正确？

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

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

虽然不能包含元素的标签可能会被快速关闭：

$( "<img>" );
$( "<input>" );

那么，最后将前两个选项之一用于 div 是错误的吗？

Answer 1

如果您只使用易于衡量的指标：第一个更好，因为它短 2 个字节。

一旦您开始考虑可读性和其他不太具体的考虑因素，它在很大程度上就变成了一个见仁见智的问题。

那么，最后将前两个选项之一用于 div 是错误的吗？

不，该部分仅适用于“如果 HTML 比没有属性的单个标记更复杂”

Answer 2

查看 jQuery 库，以下是来自v2.2.0 line 2827 的相关部分。

init = jQuery.fn.init = function(selector, context, root) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if (!selector) {
      return this;
    }

    // Method init() accepts an alternate rootjQuery
    // so migrate can support jQuery.sub (gh-2101)
    root = root || rootjQuery;

    // Handle HTML strings
    if (typeof selector === "string") {
      if (selector[0] === "<" &&
        selector[selector.length - 1] === ">" &&
        selector.length >= 3) {

        // Assume that strings that start and end with <> are HTML and skip the regex check
        match = [null, selector, null];

      } else {
        match = rquickExpr.exec(selector);
      }

      // Match html or make sure no context is specified for #id
      if (match && (match[1] || !context)) {

        // HANDLE: $(html) -> $(array)
        if (match[1]) {
          context = context instanceof jQuery ? context[0] : context;

          // Option to run scripts is true for back-compat
          // Intentionally let the error be thrown if parseHTML is not present
          jQuery.merge(this, jQuery.parseHTML(
            match[1],
            context && context.nodeType ? context.ownerDocument || context : document,
            true
          ));

          // HANDLE: $(html, props)
          if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {
            for (match in context) {

              // Properties of context are called as methods if possible
              if (jQuery.isFunction(this[match])) {
                this[match](context[match]);

                // ...and otherwise set as attributes
              } else {
                this.attr(match, context[match]);
              }
            }
          }

          return this;

您将看到它检查选择器是否为string，如果是，则查看它是否以< 开头并以> 结尾。

if (typeof selector === "string") {
  if (selector[0] === "<" &&
    selector[selector.length - 1] === ">" &&
    selector.length >= 3) {

然后，记住正则表达式 rsingleTag 是：-

var rsingleTag = ( /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/ );

同时匹配"<div>" 和"<div />"，返回div 作为group[1]。

parseHTML 使用它返回 div 元素，在 merge:-

jQuery.parseHTML = function( data, context, keepScripts ) {

    ...

    var parsed = rsingleTag.exec( data );

    // Single tag
    if ( parsed ) {
        return [ context.createElement( parsed[ 1 ] ) ];
    }

然后再次使用正则表达式，并将context 作为设置属性的对象：-

// HANDLE: $(html, props)
if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {

for 用this.attr(match, context[match]); 覆盖每个属性设置

因此，最后将前两个选项之一用于 div？

如上图，个人喜好。两者的工作方式相同。

Answer 3

来自 jQuerys 网站：

它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单......

请注意，它没有提及 HTML 生成。

JavaScript 提供了document.createElement 方法。如果将类似 HTML 的字符串作为选择器传递，则 jQuery 会使用此方法。

jQuery 入口点 ($(whatEverIFeelLikeDoingToday)) 类型检查选择器中的字符串、节点或函数，然后相应地处理请求。如果参数是字符串，那么它会通过 +/- 60 行代码（我是 HTML 吗？我是选择器吗，我是 ID，我是类吗？）。识别出类似 HTML 的字符串后，将其传递给另一个函数（附加函数调用）以生成 - 因此速度很慢（参见下面的基准测试）。事实上，除了均匀性之外，它并没有给流程增加太多价值，只是减慢了它的速度。

我发现最好的做法是：不要将 jQuery 用于相当简单的任务（即创建节点）——无论在哪里练习，都要消除其中的障碍。

var div = document.createElement('div');
div.setAttribute("id", "foo");
div.setAttribute("class", "a");
div = $(div);

请注意此benchmark 的性能显着提升。 （在 Chrome 中大约快 4 倍）。这个解决方案比上面描述的两个更快，本质上是Cross platform。

我认为更少字节与更快执行时间的论点不在此线程的范围内。但是，假设您正在缩小您的代码，我将抛出一个循环数组以生成表格的 html 行的实际示例。字节不是问题，您只需要加载一次脚本 - 执行是让您陷入困境的原因。

Answer 4

在您的情况下更好或更正确地使用它取决于此代码在您的页面中出现的频率。 @Quentin 是正确的，因为第一个和第二个选项之间只有两个字节的差异。现在，如果代码只在整个页面中出现几次，那么实际上除非您在服务器上记录大量流量，否则您不会看到两者之间有显着差异，另一方面，如果您运行的是中到高流量站点或将在您的页面上出现大量此 javascript 的实例，那么最好的选择是使用选项一，因为它小两个字节，并且在具有许多此代码实例的较大页面上，您会发现可测量节省页面的字节大小。

对于跨平台兼容性的格式良好的标签，第一个和第二个选项将在浏览器中产生完全相同的最终结果，因此在您的用例中兼容性不会受到任何一个选项的影响。

基于这些点，我建议使用选项一，因为它比选项二提供了两个字节的优势，这实际上是您的用例中两个选项之间的唯一区别。