创建与jQuery新元件的优选方式创建与jQuery新元件的优选方式(The preferred w

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

或者：

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

要么：

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

什么是使用比可重用性等第二种方式的缺点？

Answer 1:

第一个选项为您提供更多的flexibilty：

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

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

另一个好的做法是用前缀的jQuery的变量$ ：
有没有在背后使用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);

但据可读性去; jQuery的做法是我的最爱 。 按照这个有用的jQuery技巧，注意事项和最佳实践

Answer 3:

更富于表现力的方式，

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

参考： 文档

Answer 4:

按照jQuery的官方文档

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

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

PS：jQuery的版本1.11.x

Answer 5:

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

你可以把一个空<div></div>以前在你想要的地方，不要忘记设置一个ID为这个DIV。

在此之后，使用$("#divId").html(content)与你的新内容，这是您要追加DIV更换空DIV。

Answer 6:

我建议第一个选项，让您真正建立使用jQuery元素。 第二种方法简单地将元素的innerHTML属性设置为一个字符串，这恰好是HTML，并且更容易出错和不灵活。

Answer 7:

如果#box是空的，什么都没有，但如果不是这些做的非常不同的事情。 前者将增加一个div作为最后一个子节点#box 。 后者完全替代的内容#box与一个空白div ，文本和所有。

Answer 8:

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

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

添加类

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

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

文章来源: The preferred way of creating a new element with jQuery