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

【问题标题】：The preferred way of creating a new element with jQuery使用 jQuery 创建新元素的首选方式
【发布时间】：2012-05-24 01:39:37
【问题描述】：

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

要么：

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

或者：

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

使用第二种方式除了可重用性之外还有哪些缺点？

【问题讨论】：

这只是可重用性的问题。您的来电。
@gdoron 通过可重用性我的意思是：如果变量中有一个元素，那么您可以在任何需要的地方重新调用该变量，就像在您的示例中一样。
为什么.html，而不是.append在第二种情况下？
@Engineer - 抱歉，这里是错误的。我更正了。
我认为后一种方法在执行速度方面更快，但第一种方法似乎更快（10% ~ 40%）：jsperf.com/jquery-append-string-vs-append-jquery-reference

标签： javascript jquery append createelement jquery-append

【解决方案1】：

第一个选项给你更多的灵活性：

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

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

另一个好的做法是在你的 jQuery 变量前面加上 $:
Is there any specific reason behind using $ with variable in jQuery

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

【讨论】：

在我看来，以“$”开头的 jQuery 集合名称也是一个好习惯。只是注意到你所做的不需要$div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");
这些美元符号是必要的还是错字？ $div。我以前没见过这种语法，但我是 Jquery 的新手。
我总是使用 $ 是变量是 jquery 对象， $_ 如果是 jQuery 集合， _var 如果是计数器。常规变量的 var。
这种创建元素的方法的文档在哪里？ $("<div>", {id: "foo", class: "a"});。我想知道是否还有其他选择
@gdoron 请看我的问题stackoverflow.com/questions/35413044/…

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

但就可读性而言； the jQuery approach is my favorite。关注此Helpful jQuery Tricks, Notes, and Best Practices

【讨论】：

感谢jQuery reference on creating new HTML elements 的链接。很难用谷歌搜索。
最好这样做：stackoverflow.com/a/43719563/383904

【解决方案3】：

更具表现力的方式，

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

参考：Docs

【讨论】：

class 应该用引号括起来，根据文档（通过上面的文档链接）：“名称“class”必须在对象中引用，因为它是 JavaScript 保留字，并且“className " 不能使用，因为它指的是 DOM 属性，而不是属性。"

【解决方案4】：

根据jQuery official documentation

要创建 HTML 元素，首选 $("<div/>") 或 $("<div></div>")。

然后您可以使用appendTo、append、before、after 等。将新元素插入 DOM。

PS：jQuery 版本 1.11.x

【讨论】：

【解决方案5】：

根据3.4 的文档，最好使用attr() 方法的属性。

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

【讨论】：

我添加了引号。如果您不将class 放在引号中，这将默默地失败并可能导致精神错乱。

【解决方案6】：

我会推荐第一个选项，您实际上使用 jQuery 构建元素。第二种方法只是简单地将元素的 innerHTML 属性设置为一个字符串，该字符串恰好是 HTML，并且更容易出错且不太灵活。

【讨论】：

@Ash 使用第二种方法，您可能会错误地清除正在修改的容器的所有其他子项：jsfiddle.net/jbabey/RBXq5/1

【解决方案7】：

如果#box 为空，则什么都没有，但如果不是，这些会做非常不同的事情。前者会添加一个div 作为#box 的最后一个子节点。后者将#box 的内容完全替换为单个空的div、文本和所有内容。

【讨论】：

哦..我的意思是不要在这里使用 append ;)

【解决方案8】：

也可以通过以下方式创建一个div元素：

var my_div = document.createElement('div');

添加类

my_div.classList.add('col-10');

也可以执行append()和appendChild()

【讨论】：