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

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

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

Or:

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

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

当前回答

根据jQuery官方文档

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

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

jQuery 1.11.x版本

其他回答

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

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

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

另一个好的做法是在jQuery变量前加上$: 在jQuery中使用$ with variable有什么特殊的原因吗

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

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

根据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()

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

推荐文章