如何用jQuery为新创建的div追加带指定属性的span子元素？

你的代码问题出在**append()方法的参数传递方式**上——你把span的配置对象单独作为append()的第二个参数了，但实际上应该在创建每个span元素的时候，就把id、class这些配置项作为第二个参数传给jQuery的构造函数$()，再把创建好的元素传给append()。

下面是修正后的完整代码：

$('<div/>', {
  id: 'g_' + e.GID,
  class: 'grp'
})
.append($('<span/>', {
  id: 'g_i_' + e.GID,
  class: 'grp_icon'
}))
.append($('<span/>', {
  id: 'g_mng_' + e.GID,
  class: 'grp_name'
}))
.append($('<span/>', {
  id: 'g_des_' + e.GID,
  class: 'grp_des'
}))
.append($('<span/>', {
  id: 'g_lock_' + e.GID,
  class: 'grp_lock'
}))
.append($('<span/>', {
  id: 'g_vis_' + e.GID,
  class: 'grp_vis'
}));

关键修正点： #

• 每个<span/>元素在创建时，直接把id和class配置作为第二个参数传给$()，这样jQuery会直接把这些属性应用到新创建的span上。
• append()方法每次接收一个已经配置好的DOM元素（也就是我们创建好的span），链式调用就可以依次添加所有子元素。

这样就能准确生成你需要的DOM结构啦。

内容的提问来源于stack exchange，提问作者grateful