用jQuery创建新元素的首选方法
我有2种方法可以使用jQuery
创建<div>
。
或者:
var div = $("<div></div>");
$("#box").append(div);
要么:
$("#box").append("<div></div>");
使用除可重用性之外的第二种方法有什么缺点?
第一个选项给你更多的灵活性:
var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);
当然, .html('*')
会覆盖内容,而.append('*')
不会,但我想,这不是你的问题。
另一个好的做法是用$
为你的jQuery变量加上前缀:
在jQuery中使用$ with变量是否有任何特定的原因
围绕"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');
参考:文档
链接地址: http://www.djcxy.com/p/14607.html上一篇: The preferred way of creating a new element with jQuery