Question

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

或者：

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

或者：

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

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

Answer 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"属性名称周围放置引号会使其与不太灵活的浏览器更兼容。

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

但就可读性而言; the jQuery approach is my favorite。请遵循此Helpful jQuery Tricks, Notes, and Best Practices

Answer 3

更具表现力的方式，

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

参考：Docs

Answer 4

根据jQuery official documentation

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

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

PS：jQuery版本1.11.x

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

Answer 6

我有一个新想法，使用.html(content)

您可以先将空<div></div>放在所需的位置，不要忘记为此DIV设置ID。

之后，使用$("#divId").html(content)将新DIV替换为您要添加的新内容。

Answer 7

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

Answer 8

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

Answer 9

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

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

添加课程

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

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

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

9 个答案: