11th set 2009

Plugin para criar elementos DOM com a jQuery

Algo que sempre senti falta no core da jQuery foi a possibilidade de criar elementos DOM de uma forma mais simples – até porque estava acostumado a fazer isso com o Element() da Prototype, e não queria voltar a usar todos aqueles document.createElement() novamente.

Dei uma procurada e encontrei a jQuery DOM Elements Creator (Domec). Testei e funcionou bem, no IE6, 7 e Firefox. A sintaxe é bem simples, e  para criar uma div, por exemplo, é:

$.create(‘div’, {‘id’: ‘myId’}, ‘myText’)

Vou colocar abaixo uma implementação completa que fiz, criando vários elementos e adicionando-os uns aos outros:

var div = $.create("div",{id: this.htmlId, className: this.htmlClass}, "");
$.create("input",{type: "hidden", className: "widget_type", value: this.type}).appendTo(div);
var divHandler = $.create("div",{className: "widget_handler"});
$.create("h3").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_edit"}, "edit").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_delete"}, "X").appendTo(divHandler);
$.create("br").css({clear: "both"}).appendTo(divHandler);
divHandler.appendTo(div);
$.create("div",{className: "widget_edit_area"}).appendTo(div);
$.create("div",{className: "widget_container"}).appendTo(div);

Veja a documentação do plugin para ver todas as possibilidades.

Observação: testei a performance e foi mais lento, quase o dobro do tempo, para criar elementos do que com document.createElement(). Imagino que num projeto muito grande, isso possa ser um problema, mas em projetos menores não deve ter tanto impacto.

Posts relacionados

Avalie

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas (No Ratings Yet)

Leave a Reply