jQuery中向span元素追加anchor标签无效果问题排查

问题根因 #

• 你定义的span初始是普通HTML字符串，每次执行$(span)都会重新生成一个全新的span DOM对象，你上一轮循环append的a标签都存在临时生成的span对象里，没有被保存下来，循环结束后原始的span变量还是最初的空span字符串，自然没有任何a标签。
• 你缺少把最终生成的span DOM转为字符串的步骤，无法拿到可用于datatable渲染的内容。

修正后代码 #

// 直接创建jQuery对象存储span，全程复用这个对象
var $span = $("<span></span>");
// docs are fetched from Dynamics 365 
$(docs).each(function(i, value) {
  var doc = value.Attributes;
  var blob = b64ToBlob(doc.documentbody, doc.mimetype);
  var a = $("<a></a>");
  a.prop("href", URL.createObjectURL(blob));
  a.prop("download", doc.filename);
  a.prop("target", "_parent");
  a.html(doc.subject);
  // 直接向复用的span对象追加a标签
  $span.append(a);
});
// 将完整的span DOM转为HTML字符串，即可用于datatable渲染
var spanHtmlStr = $span.prop('outerHTML');

额外注意 #

• 如果你的datatable支持直接传入DOM对象，也可以直接传$span，不用转字符串
• 使用URL.createObjectURL生成的链接要记得在合适的时机调用URL.revokeObjectURL释放内存，避免内存泄漏

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