javascript式HTML記法関連

div({style:{background:'lavender', padding:'10px', fontSize:'130%', textAlign:'center'}},
    b('Hello '), span('world', {className:'pink'}), '!', br(), br(),
    table({style:{margin:'0 auto', width:'300px'}},
        tbody(
            tr(
               td({style:{background:'#ccc'}},
                   a({href:'http://javascript.crockford.com/'}, 'A link!')
               ), 
               td({style:{background:'#fff'}},
                   img({src:'/images/blog/logos/elzr.gif'})
               )
            )
        )
    )
)

• A 16-line hack to make the JS DOM API a tad more humane
  • 有名?ここのコメント欄が、関連情報のアンテナがわりに使える。

• prototype.jsにDOM buliderがつく
• Shortcuts for the new Prototype DOM Builder

// Lowpro style (http://www.danwebb.net/2007/4/16/low-pro-0-4-released)
$w('a div p form').each(function(e) {
   window['$' + e] = function() {
     return new Element(e, arguments[0]);
   } });
// $form({action: '/foo', method: 'post'}); 

• script.aculo.us の Builderではこう。

  element = Builder.node('div',{id:'ghosttrain'},[
    Builder.node('div',{className:'controls',style:'font-size:11px'},[
      Builder.node('h1','Ghost Train'),
      "testtext", 2, 3, 4,
      Builder.node('ul',[
        Builder.node('li',{className:'active', onclick:'test()'},'Record')
      ]),
    ]),
  ]);

creates (without newlines):

<div id="ghosttrain">
  <div class="controls" style="font-size:11px">
    <h1>Ghost Train</h1>
    testtext234
    <ul>
      <li class="active" onclick="test()">Record</li>
    </ul>
  </div>
</div>