如何最好地利用jQuery來編程生成HTML元素

Question

我有一大堆的JavaScript函數如下所示：

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

這似乎是一個好canidate的重構。從審查幾個不同的jQuery文檔看來，我應該可以做類似於這個僞代碼的東西：

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

我在正確的軌道上嗎？

謝謝！

編輯

我打電話上面用下面的代碼和行，我做的appendChild與generateBusinessImage格是我的錯誤與以下一些問題的答案中出現的功能：

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

Answer 1

你可以創建所有使用jQuery通過鏈式調用：

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

在get(0)（注意在最後一行：保持與您現有的generateBusinessImage()呼叫者向後兼容我返回的jQuery創建的DOM元素，通過調用.get(0)）

參考文獻：

• jQuery.attr
• jQuery.fn.get

Answer 2

是的，你是對的。但是，一般來說，實際上字符串連接的速度會更快（儘管它有點不穩定）。

做你想要什麼jQuery的，它會像這樣：

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

老實說，雖然，這將是更快（但醜陋的代碼）：

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