我有 2 种方法可以创建<div>using jQuery.
任何一个：
var div = $("<div></div>");
$("#box").append(div);
或者：
$("#box").append("<div></div>");
除了可重用性之外，使用第二种方式有什么缺点？
使用 jQuery 创建新元素的首选方式
IT技术
javascript
jquery
append
createelement
jquery-append
2021-01-19 11:18:45
6个回答
第一个选项为您提供了更大的灵活性：
var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);
当然，.html('*')覆盖内容而.append('*')不会覆盖，但我想，这不是你的问题。
另一个好的做法是在您的 jQuery 变量前加上前缀$：
在 jQuery 中使用 $ 和变量是否有任何特定原因
在"class"属性名称周围加上引号将使其与不太灵活的浏览器更兼容。
我个人认为代码的可读性和可编辑性比性能更重要。无论您发现哪个更容易查看，它都应该是您针对上述因素选择的那个。你可以把它写成：
$('#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 技巧、注释和最佳实践
更有表现力的方式，
jQuery('<div/>', {
"id": 'foo',
"name": 'mainDiv',
"class": 'wrapper',
"click": function() {
jQuery(this).toggleClass("test");
}}).appendTo('selector');
参考：文档
创建一个 HTML 元素，$("<div/>")或者$("<div></div>")是首选。
然后您可以使用appendTo、append、before、after等。将新元素插入 DOM。
PS：jQuery 版本 1.11.x
根据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
});