使用 jQuery 创建新元素的首选方式

Question

我有两种方法可以使用 <div> 创建 jQuery 。

任何一个：

var div = $("<div></div>");
$("#box").append(div);

或者：

$("#box").append("<div></div>");

除了可重用性之外，使用第二种方式的缺点是什么？

原文由 Ashwin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

第一个选项为您提供更多灵活性：

 var $div = $("<div>", {id: "foo", "class": "a"});
 $div.click(function(){ /* ... */ });
 $("#box").append($div);

当然 .html('*') 会覆盖内容，而 .append('*') 不会，但我想，这不是你的问题。

另一个好的做法是在你的 jQuery 变量前面加上 $ ：

在 jQuery 中使用带有变量的 $ 背后有什么具体原因吗

在 "class" 属性名称周围加上引号将使其与不太灵活的浏览器更兼容。

原文由 gdoron is supporting Monica 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我个人认为代码的可读性和可编辑性比性能更重要。你觉得哪一个更容易看，就应该是你根据以上因素选择的那个。你可以把它写成：

 $('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

你的第一个方法是：

 // create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

但就可读性而言； jQuery 方法是我最喜欢的。遵循这个 有用的 jQuery 技巧、注释和最佳实践

原文由 Niranjan Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议