Sempre achei um pouco chato criar elementos no DOM usando Javascript, não gosto da idéia de escrever HTML no meio de script e o uso de templates também não me agrada muito.
Então tive a idéia de criar elementos usando seletores CSS e assim nasceu o jquery.dominator, um plugin para jQuery. O código com testes usando QUnit está disponível no meu Github.
Foi um projeto legal de se desenvolver, tive alguns problemas para implementar recursos mais complexos mas tomei por base (copiei) o funcionamento do Sizzle e do jQuery e adaptei (roubei) alguns trechos, isso garantiu a compatibilidade entre os browsers.
Segue alguns exemplos de uso:
// Tags simples
$.dominator('p'); // <p></p>
$.dominator('div'); // <div></div>
$.dominator('div p'); // <div><p></p></div>
$.dominator('div p span a'); // <div><p><span><a></a></span></p></div>
// IDs, Classes
$.dominator('div#myid'); // <div id="myid"></div>
$.dominator('div p#myid'); // <div><p id="myid"></p></div>
$.dominator('div#myid p'); // <div id="myid"><p></p></div>
$.dominator('#myid'); // <div id="myid"></div>
$.dominator('div.myclass'); // <div class="myclass"></div>
$.dominator('div.my-class'); // <div class="my-class"></div>
$.dominator('div.my_class'); // <div class="my_class"></div>
$.dominator('.myclass'); // <div class="myclass"></div>
$.dominator('div.first.second'); // <div class="first second"></div>
// Múltiplos seletores (paralelos)
$.dominator('div, p'); // <div></div><p></p>
$.dominator('div#id, p.class a'); // <div id="id"></div><p class="class"><a></a></p>
// Atributos
$.dominator('a[title=simpletitle]'); // <a title="simpletitle"></a>
$.dominator('a[title=With Space]'); // <a title="With Space"></a>
$.dominator('a[title=With,Comma]'); // <a title="With,Comma"></a>
$.dominator('a[title=With#Hash]'); // <a title="With#Hash"></a>
$.dominator('a[title=With.Dot]'); // <a title="With.Dot"></a>
// Variáveis
$.dominator('a[rel=${myvar}]', {myvar: 'myvariable'}); // '<a rel="myvariable"></a>'
$.dominator('a[rel=${myvar}]', {myvar: 'My Variable'}); // '<a rel="My Variable"></a>'
$.dominator('a[name=${myvar}]', {myvar: 'myvar'}); // '<a name="myvar"></a>'
$.dominator('a[name=${myvar}]', {myvar: 'My Variable'}); // '<a name="My Variable"></a>'
Se for útil pra você deixe um recado. Também gostaria de idéias para melhorar o plugin!