代码之家 › 专栏 › 技术社区 › mwilliams

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

refactoring jquery javascript

mwilliams · 技术社区 · 16 年前

我有很多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));

2 回复 | 直到 16 年前

Roatin Marth 16 年前

您可以通过链接调用使用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() 我返回创建的dom元素jquery,方法是调用 .get(0) )

参考文献:

KyleFarris 16 年前

是的,你是对的。不过,一般认为实际进行字符串连接更快(尽管有点草率)。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

11 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前