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

対象者

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

インストール方法

eGenのReleasesから最新版の「jquery.egen.min.js」をダウンロードして、HTMLからアクセス可能な場所に設置する
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初投稿なので、何か変な部分とかあったら教えて欲しいです。

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

対象者

インストール方法

使い方

最後に