Comment mieux utiliser jQuery pour générer des éléments HTML programme

Question

J'ai un tas de fonctions Javascript qui ressemblent à ce qui suit:

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

Cela semble être une bonne canidate pour un refactoring. De l'examen de quelques différents documents jQuery, il semble que je devrais être en mesure de faire quelque chose de similaire à ce code pseudo:

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

Suis-je sur la bonne voie?

Merci!

EDIT

J'appelle la fonction ci-dessus avec le code suivant et la ligne où je appendChild sur div avec generateBusinessImage est où mes erreurs se produisent avec quelques-unes des réponses ci-dessous:

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

Answer 1

Vous peut créer tout cela avec jQuery via des appels enchaînées:

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 sur le get(0) sur la dernière ligne : Rester en arrière compatible avec votre interlocuteur de generateBusinessImage() je retourne l'élément DOM jQuery créé, en appelant .get(0))

Références existantes:

• jQuery.attr
• jQuery.fn.get

Answer 2

Oui, vous avez raison. En général, on pense cependant qu'il est plus rapide de faire une concaténation de chaînes (bien que ce soit un peu plus lent).

Pour faire ce que vous voulez dans jquery, ce serait comme si:

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

Pour être parfaitement honnête, cependant, ce sera plus rapide (mais le code plus laid):

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