ebi.js というのを書きました

Element Builderということで、ebi.jsというのを書きました。

• onozaty/ebi.js · GitHub

下記のようなHTMLを

<div id="target" style="border: 1px solid black;">
  text1
  <span style="color: red; font-weight: bold;">red</span>
  text2
  <p>button<input type="button" class="class1" value="click"></p>
</div>

JavaScriptで下記のように書けます。

Ebi.createElement('#target')
  .style('border', 'solid 1px black')
  .append('text1')
  .start('span')
    .append('red')
    .style({
      color: 'red',
      fontWeight: 'bold'
    })
  .end()
  .append('text2')
  .start('p')
    .append('button')
    .start('input')
      .property('className', 'class1')
      .property({
        type: 'button',
        value: 'click'
      })
      .event(
        'click',
        function() { alert(1) }
      )
    .end()
  .end();

FirefoxのアドオンレビューでinnerHTMLはセキュリティ上避けるべきと指摘されて、そのままDOMのAPI使って書いていたら、面倒なコードになってしまったので、メソッドチェーンで書けるようなものということで書きました。

詳しい使い方は、また別途。
(とりあえず、今年に間に合わせたかったので、先にあげておきます…)