12月 09

HTMLタグを生成するだけjQueryプラグイン

JavaScript • jQuery • プログラミング Add comments 570 PVs
Posted at 13:00 by Hiro

REST APIを使って外部サイトからデータセットを取得して、各要素をリスト形式でページ内に表示させたいことがあるかと思います。

1
2
3
4
5
6

var fruits = [ 'apple', 'banana', 'orange' ];
$.each(fruits, function() {
    $('ul#fruits').append(
        $(document.createElement('li')).text(this)
    );
});

4行目の$(document.createElement('li'))の部分は、$('<li>')と簡単に書くこともできますが、JavaScriptコードにはHTML固有の文法を持ち込みたくないものです。

しかし、新しくDOM要素を追加する度にdocument.createElement()を呼び出すのは面倒ですし、コードも冗長になってしまうので、HTMLタグを生成するだけのjQueryプラグインを作りました。

ダウンロード： jQuery Tag Plugin / jquery.tag.js

コードはたったの10行。

1
2
3
4
5
6
7
8
9
10

;jQuery.tag || (function($) {
    $.extend({
        tag: function(name, attr, css) {
            var e = $(document.createElement(name));
            if(attr) e.attr(attr);
            if(css) e.css(css);
            return e;
        }
    });
})(jQuery);

ソースを読めば一目瞭然なので、引数を説明するまでもないのですが、一応リファレンスとして書いておきます。

  • name [必須]
    HTMLタグの要素名を文字列で指定。
    例：$.tag('li')
    結果：<li>
  • attr [任意]
    要素に適用する属性をキー／値のハッシュオブジェクトで指定。
    例：$.tag('li', {id:'demo'})
    結果：<li id="demo">
  • css [任意]
    要素に適用するスタイルをキー／値のハッシュオブジェクトで指定。
    例：$.tag('li', {id:'demo'}, {color:'red'})
    結果：<li id="demo" style="color:red">

それでは、このtagプラグインを使って、冒頭で紹介したコードを書き直してみましょう。

1
2
3
4

var fruits = [ 'apple', 'banana', 'orange' ];
$.each(fruits, function() {
    $('ul#fruits').append($.tag('li').text(this));
});

タグ名だけ指定しているので、あまり効果が感じられないかもしれませんが、属性やスタイルを指定する場合は有用なはず。

タグ: • • • •

コメントをどうぞ