javascript - 如何最好地利用 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;
} 

这似乎是一个很好的重构候选者。通过查看几个不同的 jQuery 文档，我似乎应该能够执行类似于此伪代码的操作:

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

我走在正确的轨道上吗？

谢谢!

编辑

我正在使用以下代码调用上面的函数，我在 div 上使用 generateBusinessImage 执行 appendChild 的行是我发生错误的地方，下面有一些答案:

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