jQuery

jQuery-eGenを使ってCSSセレクタ記法でタグ要素作成

JavaScript(Web)でよく使われるdocument.querySelector()やjQueryの$()は、CSSセレクタ記法(以下CSSセレクタ)を使って要素マッチングできる。CSSセレクタとはbody .content > sectionのようなやつ。
しかし、要素を取ってくる場合はCSSセレクタで指定するのに、作成する場合は面倒な要素作成メソッド群か、jQueryの場合はHTMLタグで指定すると要素作成できることになっている。これでは一貫性がないだろう。
そこでCSSセレクタで要素作成でき、さらにそれなりに高速で簡単に使えるjQueryライブラリjQuery-eGenを作った。jQuery使っている段階で低速というツッコミは無しだ。

対象者

  • ウェブページ or Webアプリ開発でjQueryを使っている
  • 要素作成が煩わしいが、テンプレートエンジンは大げさだ
  • CSSセレクタやSlimテンプレートエンジンが大好きだ
  • フレームワークは使いたくない人/プロジェクト

インストール方法

  1. eGenのReleasesから最新版の「jquery.egen.min.js」をダウンロードして、HTMLからアクセス可能な場所に設置する
  2. jQueryの読み込み後に本ライブラリを読み込む
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.egen.min.js"></script>
    <title>jQuery-eGen Example</title>
  </head>
  <body> ... </body>
</html>

使い方

次のコードのようなことをしたいとする。

before.js
$('body .content')
  .append( $('<div class="block">新しい要素</div>') )
  .append( $('<strong><a class="link" href="page.html">ハイパーリンク</a></strong>') );

jQuery-eGenを使うことで次のようにできる。

after.js
$('body .content')
  .egen('.block', null, '新しい要素')
  .egen('strong a.link', {href: "page.html"}, 'ハイパーリンク');

第3引数に文字列を指定すると、CSSセレクタで指定した最後のタグ要素にテキストを埋め込められる。このテキストはdocument.createTextNodeを使って生成されるため、XSS対策を考える必要がない。
そんなわけで使ってみてください。

最後に

この記事はQiita初投稿なので、何か変な部分とかあったら教えて欲しいです。