250

我有两种方法可以创建<div>using jQuery.

任何一个：

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

或者：

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

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

4

8 回答 8

371

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

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

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

另一个好的做法是在您的 jQuery 变量前面加上$：
在 jQuery 中使用 $ 和变量是否有任何特定原因

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

于 2012-05-16T13:22:11.777 回答
82

我个人认为代码的可读性和可编辑性比性​​能更重要。无论您发现哪一个更容易查看，它都应该是您根据上述因素选择的那个。你可以把它写成：

$('#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 技巧、注释和最佳实践

于 2012-05-16T13:43:35.250 回答
27

更有表现力的方式，

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

参考：文档

于 2013-07-08T07:54:21.383 回答
8

根据jQuery官方文档

创建一个 HTML 元素，$("<div/>")或者$("<div></div>")是首选。

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

PS：jQuery 版本 1.11.x

于 2015-04-09T17:36:07.353 回答
3

根据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
});
于 2020-02-24T12:46:50.670 回答
0

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

于 2012-05-16T13:23:24.883 回答
0

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

于 2012-05-16T13:25:11.227 回答
0

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

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

添加类 

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

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

于 2017-07-29T20:06:06.013 回答