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

227

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

要么：

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

要么：

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

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

— 阿什温
source

8

这只是可重用性的问题。你的来电。

— Roko C. Buljan

@gdoron的可重用性我的意思是：如果您在变量中包含一个元素，那么您可以在任何需要的地方调用该var，就像您的示例一样。

— Roko C. Buljan

2

为什么.html，但不是.append第二种情况？

— 工程师

@Engineer-抱歉，这是错误的。我纠正了。

— 阿什温（Ashwin）

我认为后一种方法在执行速度方面更快，但第一种方法似乎更快（10％〜40

— Fabrizio

339

第一种选择使您更具灵活性：

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

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

另一个好的做法是在jQuery变量前加上$：
在jQuery中将$与变量一起使用后，是否有任何特定原因

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

— gdoron支持莫妮卡
source

10

$我认为，以“ ” 开头的jQuery集合名称也是一个好习惯。只是指出您所做的事情不需要$div：$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— 爆炸药2012年

这些美元符号是必需的还是错字？$div。我以前没有看过这种语法，但是我是Jquery的新手。

— felwithe 2015年

我一直使用$，变量是一个jquery对象，$ _如果它是一个jQuery集合，_var如果它是一个计数器。常规变量的var。

— 凯西2015年

1

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

— Saba Ahang

@gdoron请看看我的问题stackoverflow.com/questions/35413044/...

— Vixed

74

我个人认为，与性能相比，代码的可读性和可编辑性更为重要。无论您发现哪一个更容易看，它都是您出于上述因素而选择的一个。您可以将其编写为：

$('#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）
source

感谢您提供有关创建新HTML元素的jQuery参考的链接。很难谷歌。

— 鲍勃·斯坦

最好这样做：stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

更富有表现力的方式

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

参考：文档

— 大山
source

4

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

— 艾萨克·格雷格森

5

根据jQuery官方文档

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

然后你就可以使用appendTo，append，before，after和等，。将新元素插入DOM。

PS：jQuery版本1.11.x

— 董亚伦
source

2

根据3.4的文档，最好将属性与attr()method 一起使用。

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

— 阿努拉达（Anuradha Mudalige）
source

我加了引号。如果您不加class引号，它将无声地失败并可能导致精神错乱。

— John Henckel

0

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

— 杰比
source

1

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

— jbabey 2012年

0

如果#box为空，则什么都不做，但是如果不是，则这些做的事情会大不相同。前者将添加div作为的最后一个子节点#box。后者完全用#box单个empty div，text和all 替换了内容。

— 爆炸药
source

哦..我不是要在这里使用附加;）

— 阿什温（Ashwin

0

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

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

添加类

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

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

— nabila_ahmed
source