jQTips · 动态添加元素的清爽写法

在写动态添加元素时，一般比较常见的写法都是这个样子的：

var newClass = 'newDiv';
var newText = 'Demo!';
var newBody = $('<div class="' + newClass + '">' + newText + '</div>');
$('body').append(newBody);

如果还需要事件呢，那么就在前边加个事件委托：

$(document).on('click', '.newDiv', function(){
    console.info('Click Me!');
});

但其实呢，这里可以还使用jQuery对象的包装语法，通过查询文档呢我们知道它的语法是jQuery( html, attributes )，在html参数这里，我们可以使用一个（不含任何属性的）单标签，就是类似于"<div />"、"<div>"以及"<div></div>"这几种类型的标签，它和前边一大长串字符串那种的区别在于：前者会用innerHTML实现；而后者则是调用.createElement()实现的。

看到这里你可能会问，如果前边用了单标签，那里边这堆class啊还有内容啥的该咋办？答案就在第二个参数attributes上。attributes参数是一个对象，里边放的是第一个参数、也就是单标签里的属性，简单来说你可以将它等同于.attr(attributes)来用，并且，它还能综合.val()、.css()、.html()、.text()、.data()、.width()、.height()、.offset()之类的功能，比如第一段代码就可以改写成：

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass, //和.attr()一样，由于class是保留字所以要强制加引号
    text: newText
}).appendTo('body');

而绑定事件也可以一并写进去，比如带有简写（即.click()）调用的click就可以这样写：

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass,
    text: newText,
    click: function(){
        console.info('Click Me!');
    }
}).appendTo('body');

当然也可以写成：

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass,
    text: newText,
    on: {
        click: function() {
            console.info('Click Me!');
        }
    }
}).appendTo('body');

如果为一堆变量名命名发愁，也可以完全不用变量，变成：

$('<div>', {
    'class': 'newDiv',
    text: 'Demo!',
    click: function(){
        console.info('Click Me!');
    }
}).appendTo('body');

看起来有没有比苦逼的字符串拼接清爽许多呢？