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));

Roatin Marth · Accepted Answer · 2009-10-09 19:44:32Z

3

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:

answered Oct 9, 2009 at 19:44

Roatin Marth

24.2k3 gold badges55 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KyleFarris · Accepted Answer · 2009-10-09 19:54:11Z

2

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" />');
}

edited Oct 9, 2009 at 19:54

answered Oct 9, 2009 at 19:44

KyleFarris

17.6k5 gold badges43 silver badges41 bronze badges

2 Comments

mwilliams Over a year ago

I'm throwing an error: "ReferenceError: Can't find variable: $". And yeah, I thought about that too, just concatenating a long string.

mwilliams Over a year ago

I updated my question with how my method is being called; which might be able to be refactored as well.

Collectives™ on Stack Overflow

How to best utilize jQuery to programmatically generate HTML elements

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related