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

javascript jquery append jquery-append createelement

2022-08-30 00:33:26

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

也：

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

艺术

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

使用除可重用性以外的第二种方式有哪些缺点？

答案 1

第一个选项为您提供了更大的灵活性：

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

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

另一个好的做法是在jQuery变量前面加上前缀：
在jQuery中使用$和变量背后是否有任何具体原因$

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

答案 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技巧，注释和最佳实践