2011-01-29

[jquery] jQuery(html, props)が便利

今更ながらjQuery 1.4からの新機能のプロパティ指定つきDOMエレメント生成は、こんな風に使えて便利です。

$('<p />', {
    id: 'sample123',
    'class': 'sample-class',
    text: '内容はないよう(>_<)',
    css: {
        color: 'black',
        background: '#ccf'
    },
    click: function () {
        alert('clicked');
    }
}).appendTo('body');

解説
特別な意味を持つプロパティ、上記の場合 text, html, css, click以外のid, classはattrとして扱われます。
classは予約語なのでクオートが必要です。

この機能を使わないで書くなら:

$('<p />')
    .attr({
        id: 'sample123',
        'class': 'sample-class'
    })
    .text('内容はないよう(>_<)')
    .css({
        color: 'black',
        background: '#ccf'
    })
    .click(function () {
        alert('clicked');
    })
    .appendTo('body');

詳しくは..
jQuery() - jQuery API