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

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

添加课程

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

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