creating DOM elements with jQuery in a more elegant way

Um, doesn't this simply work? Why create a jquery object?

$('body').html('<div class="spinner"></div>')

I think the point was to create a DOM element without writing to much html. Maybe the example is a bit misleading.

@dpashkevich yeah it does simply work, but as i was saying in my example when you have dynamic attributes I find it cleaner, personal preference.

var className = "booya";
$('body').html($('<div>', {class: className}));

pretty good...

@dperrymorrow oh ok, now I see!

just use mootools

Yeah, writing HTML in your JS is less than ideal and should be avoided. I would push for always using javascript templates. But, sometimes you find yourself in this situation.

This is far more elegant than either of those approaches.

document.body.grab(new Element('div').addClass('spinner'));

@milesj: where can I find the documentation for grab()?

Ok, I see the grab() method belongs to Mootols.

For the record, I am of the opinion that there is no justifiable reason to mix html of any kind in with JS.

Yeah.
I said it.

I suggest posting a slightly longer example to make the point, like this one:

$('<li>', {
     html: $('<a>', {
          href: item.href,
          text: item.title
     })
 });

I agree that you shouldn't mix html and js though, but it may not be worth it to include a template engine into your project if you're adding a small and simple feature to a website.

Useful. I was looking for same thing to display my code in most elegent way. thanks. One more thing. How to add condition or looping in this? like I want to create dynamic <tr> of my table. Or say I want hide/show content.