this is a good idea, but my function is easier than your:
(function($){
$.fn.create = function(element, attributes){
return $(document.createElement(element)).attr(attributes).prependTo(this);
};
})(jQuery);

usage:
$(‘body’).create(‘div’, {‘id’:'sampleId’, ‘class’:'normal’}).text(‘sample’);

That said, I can see how it would be nice to map a comfortable syntax to an uncomfortable one in situations where there is no other remedy.

.create(‘li#item.custom-class’, ‘content of the element here’);

So it totally makes sense to do $(‘li’) to find all the LI’s in a page, and $(”) to create a new LI.

I came from a Mootools background to a huge jQuery project – first thing I did was port over a bunch of Mootools goodies: bind and pass (which look to be coming in the next version of jQuery) and Array, String and Number helpers… but the goal is understanding the tools you are given. It is the difference between someone who is a year in another country and everytime they speak think “how would I say this in English” and then translate – vs – someone who is 10 years in another country and just speaks the language fluently. $.create() is not increasing your toolbox, it’s rewriting a piece of a foreign language in English.

I didn’t say innerHTML adds another JS-layer. What I said was mootools doesn’t add another JS layer it uses the object-oriented way. Not better or bader just different.

For me using CSS selectors to create elements is something between this two methods. Expressive strings to make it a little easier to read and write, but still be objected-oriented. Still not better or bader but definitly slower than innerHTML, I agree with you. But JS-engines become faster and faster and speed isn’t always the most importing thing.

Still…mootools rocks :)
Oh and sorry for my bad English, it isn’t my native language.

Here’s a little snippet I’ve used a lot when desiring this object-y style:

/* Return a DOM element with tag name `elem` and attributes {attrs}. */
function DOM(elem, attrs) {
var elem = document.createElement(elem);
for (var attr in attrs) {
elem[attr] = attrs[attr];
}
return elem;
}


It provides nearly exactly the same API as the above code (though probably not as full-featured)… As an example:


var element = DOM('li',{
id: 'item',
'className': 'custom-class',
'innerHTML': 'This is a new LI element'
});


Also, (moreso from the comments on Basil’s post..) I wanted to point out that throwing jQuery a big string of HTML is faster than using all the methods…

So:

$('#wrapper").append('hello world');

is faster than

jQuery(" " ).attr( "id", "wrapper-header").addClass( "header" ).html( "hello world").appendTo( jQuery( "#wrapper" ) );


Cheers

$(”).attr(‘id’, ‘myid’).css(‘opacity’, ’0.5′).appendTo(“#wrap”);