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

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

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

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

当然也可以写成：

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

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

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

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