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

我是在正确的轨道上吗？

谢谢！

修改

我正在使用以下代码调用上面的函数，并且我使用generateBusinessImage在div上执行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()调用者我通过调用.get(0)返回创建的jQuery元素jQuery

参考文献：

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

如何最好地利用jQuery以编程方式生成HTML元素

2 个答案: