使用jQuery创建新元素的首选方法是什么？

Question

我可以用jQuery这个库的两种方式创建一个 <div> 元素。

要么：

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

或者：

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

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

- Ashwin

---

这只是可重用性的问题。由你决定。 - Roko C. Buljan

@ gdoron，我所说的可重用性是指：如果您在变量中有一个元素，那么您可以在需要的任何地方重新调用该变量，就像您的示例中一样。 - Roko C. Buljan

为什么第二种情况不是.append，而是.html？ - Engineer

@工程师 - 抱歉，这是个错误。我已经纠正了。 - Ashwin

第一种方法是低级编程构建器方法（快速）。 第二种方法可以是复杂的HTML字符串，需要解析（昂贵）。 - Christophe Roussy

Answer 1

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

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

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

另一个好的实践是在 jQuery 变量前加上 $ 前缀：
在 jQuery 中使用变量时添加 $ 的特定原因

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

- gdoron is supporting Monica

---

在我看来，以“$”开头的jQuery集合名称是一个很好的惯例。请注意，你所做的不需要使用"$div"：$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box"); - Explosion Pills

这些美元符号是必要的还是打错了？$div。我以前没见过这种语法，但我对Jquery还很陌生。 - felwithe

我总是使用 $ 来表示变量是 jQuery 对象，$_ 表示它是一个 jQuery 集合，_var 表示它是一个计数器。对于普通变量则使用 var。 - Casey ScriptFu Pharr

这种创建元素的方式的文档在哪里？$("<div>", {id: "foo", class: "a"});。我想知道是否还有其他选项。 - Saba Ahang

@gdoron请看看我的问题https://dev59.com/VVsW5IYBdhLWcg3wFj5p - Vixed

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

---

感谢您提供的有关创建新HTML元素的jQuery参考链接，这个真的很难通过谷歌搜索到。 - Bob Stein

最好像这样做：https://dev59.com/3nNA5IYBdhLWcg3wrf43#43719563 - Roko C. Buljan

Answer 3

更富表现力的方式，

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

参考资料：文档

务必仔细阅读文档，因为这种表示法具有某些后果，对于检查代码的人来说可能不会立即显而易见。

由于“class”是JavaScript保留字，因此在对象中必须将其引用起来，并且不能使用“className”，因为它指的是DOM属性，而不是属性。
虽然第二个参数很方便，但它的灵活性可能会导致意外后果（例如，$( "<input>", {size: "4"} ) 调用了 .size() 方法而不是设置 size 属性）。

- Darshan

---

根据上述文档（通过上面的Docs链接），class应该加上引号。文档中指出：“由于class是JavaScript保留字，因此在对象中必须将其用引号括起来。不能使用className，因为它是DOM属性，而不是属性。” - Isaac Gregson

Answer 4

根据jQuery官方文档：

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

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

PS：jQuery版本1.11.x。

- Alan Dong

Answer 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
});

- ymssa___

---

我加了引号。如果你不在“class”两边加引号，这个操作将悄无声息地失败，并可能导致疯狂的结果。 - John Henckel

Answer 6

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

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

添加类

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

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

- nabila_ahmed

Answer 7

我建议采用第一种选项，使用jQuery实际构建元素。第二种方法只是将元素的innerHTML属性设置为字符串，该字符串恰好是HTML，并且更容易出错且不够灵活。

- jbabey

---

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

Answer 8

如果#box是空的，则什么也不做，但如果不是空的，则会执行非常不同的操作。前者将在#box的最后一个子节点添加一个div。后者将使用单个空的div，包括文本，完全替换#box的内容。

- Explosion Pills

---

哦...我是想在这里使用append()方法的 ;) - Ashwin