How to best utilize jQuery to programmatically generate HTML elements

Question

I have a bunch of Javascript functions that look like the following:

function generateBusinessImage (business) {
  var business_image = document.createElement('img');
  business_image.setAttribute('class','photo');
  business_image.alt = business.name;
  business_image.title = business.name;
  business_image.align = 'right';
  business_image.src = business.photo_url;
  return business_image;
}

This seems like a good canidate for a refactor. From reviewing a few different jQuery docs, it would appear that I should be able to do something similar to this pseudo code:

return var business_image = document.createElement('img').
  setAttribute('class','photo').
  alt(business.name).
  title(business.title).
  align('right').
  src(business.photo_url);

Am I on the right track?

Thanks!

EDIT

I'm calling the function above with the following code and the line where I do appendChild on div with generateBusinessImage is where my errors are occurring with some of the answers below:

var div = document.createElement('div');
var div_class = document.createAttribute('class');      
div.setAttribute('class','business');   
div.appendChild(generateBusinessImage(business));

Answer 1

Yes, you are right. Generally, it is, however, thought to be faster to actually do string concatenation (albeit, it is a bit sloppier).

To do what you want in jquery, it would be like so:

function generateBusinessImage (business) {
  var $business_image = $('<img />');
  $business_image
    .addClass('photo')
    .attr('alt',business.name)
    .attr('title',business.name)
    .attr('align','right')
    .attr('src',business.photo_url);
  return $business_image;
}

To be perfectly honest, though, this will be faster (but uglier code):

function generateBusinessImage(business) {
  return $('<img src="'+business.photo_url+'" alt="'+business.name+'" title="'+business.name+'" align="right" class="photo" />');
}

Answer 2

You can create all that with jQuery via chained calls:

function generateBusinessImage (business) {
    return $('<img class="photo" align="right" />')
        .attr('alt', business.name)
        .attr('title', business.name)
        .attr('src', business.photo_url)
        .get(0)
}

(Note on the get(0) on the last line: to remain backwards compatible with your existing caller of generateBusinessImage() I return the DOM element jQuery created, by calling .get(0))

References:

• jQuery.attr
• jQuery.fn.get