使用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变量添加前缀$:
在jQuery中使用$ with变量背后是否有任何特定原因

在"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

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