JS实现JSON转CSV功能时两个下载链接无法同时生效问题求助

• 核心原因是你使用innerHTML +=操作修改DOM时，会先销毁table内部所有已有的DOM元素，再重新渲染拼接后的全部内容，你第一次给id为ms的链接绑定的点击事件会随着旧DOM的销毁直接失效，只有最后一次innerHTML +=操作后绑定的ds链接事件能保留，所以只有位置靠下的链接能正常下载。
• 额外存在HTML标签嵌套错误：第一个a标签的闭合位置写在了tr闭合标签外面，不符合HTML语法规范，也可能导致DOM渲染异常。

方案1：一次性拼接所有HTML后统一绑定事件（改动最小） #

先把所有要插入的内容拼接完成后一次性写入DOM，避免多次innerHTML +=反复销毁重建DOM，最后再统一绑定两个链接的事件：

var table = document.getElementById('table1');
// 拼接所有要插入的HTML，同时修正a标签嵌套错误
var allHtml = `
<tr>
  <td colspan=3>
    <a href ='#' id='ms' download='${username}-${date1}-missing-stress-level.csv'>
      <center>Download Stress ActivityResult</center>
    </a>
  </td>
</tr>
<a href='#' id='ds' download='${username}-${date1}-daily-survey.csv'>
  <center>Download Daily Survey Result</center>
</a>`;
// 一次性写入全部内容
table.innerHTML = allHtml;

// 内容写入完成后统一绑定事件
$( "#ms" ).click(function( event ) {
  this.href = 'data:plain/text,' + JSONToCSV(mstl);
});
$("#ds").click(function( event ) {
  this.href = 'data:plain/text,' + JSONToCSV(ds);
}); 

方案2：使用DOM API创建元素追加 #

直接创建DOM节点后追加到table中，不会影响已有DOM节点的绑定事件，稳定性更高：

var table = document.getElementById('table1');
// 创建第一个下载链接
var tr = document.createElement('tr');
var td = document.createElement('td');
td.colSpan = 3;
var msLink = document.createElement('a');
msLink.href = '#';
msLink.download = `${username}-${date1}-missing-stress-level.csv`;
msLink.innerHTML = '<center>Download Stress ActivityResult</center>';
msLink.addEventListener('click', function() {
  this.href = 'data:text/csv,' + JSONToCSV(mstl);
});
td.appendChild(msLink);
tr.appendChild(td);
table.appendChild(tr);

// 创建第二个下载链接
var dsLink = document.createElement('a');
dsLink.href = '#';
dsLink.download = `${username}-${date1}-daily-survey.csv`;
dsLink.innerHTML = '<center>Download Daily Survey Result</center>';
dsLink.addEventListener('click', function() {
  this.href = 'data:text/csv,' + JSONToCSV(ds);
});
table.appendChild(dsLink);

优化提示：建议把数据的MIME类型改为text/csv而非plain/text，更符合CSV文件规范，避免部分浏览器识别异常

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