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

我有两种方法可以使用jQuery创建<div>。

:

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

或者:

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

除了可重用性之外，使用第二种方法的缺点是什么?

344992 次浏览
小开
最佳答案

第一个选项给你更多的灵活性:

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

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

另一个好的实践是在jQuery变量前面加上$:
在jQuery中使用$ with variable有什么特殊的原因吗 < / p >

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

小开

我建议使用第一种方法，即使用jQuery实际构建元素。第二种方法只是简单地将元素的innerHTML属性设置为字符串，这恰好是HTML，更容易出错，也不太灵活。

小开

如果#box是空的，什么都没有，但如果不是空的，它们会做非常不同的事情。前者将添加div作为#box的最后一个子节点。后者将#box的内容完全替换为一个空的div、文本和所有内容。

小开
我个人认为代码的可读性和可编辑性比性能更重要。无论你觉得哪个更容易看，它应该是你根据上述因素选择的。 你可以这样写:

$('#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');

参考:文档

一定要彻底阅读文档，因为这种符号的某些后果对检查代码的人来说并不明显。

"class"名称必须在对象中引用，因为它是JavaScript保留字，并且"className"不能使用，因为它指的是DOM属性，而不是属性。 虽然第二个参数很方便，但它的灵活性可能会导致意想不到的结果(例如$( "<input>", {size: "4"} )调用.size()方法而不是设置size属性)
小开

根据jQuery官方文档

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

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

jQuery 1.11.x版本

小开

也可以用下面的方法创建一个div元素:

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

添加类

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

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

小开

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

提交答案