如何移除HTML中element.innerHTML数组输出里的逗号？

嘿，我来帮你搞定这个烦人的逗号问题！你遇到的情况其实很典型——当你直接把数组赋值给innerHTML时，JavaScript会自动把数组转换成逗号分隔的字符串，这就是那些多余逗号的来源。咱们一步步来解决：

为什么join(" ")没生效？ #

大概率是你没把join()处理后的结果正确赋值给innerHTML，而是直接把数组本身塞进去了。比如如果写了element.innerHTML = varArray;，JS会默认调用数组的toString()方法，结果就是用逗号把元素连起来。

正确的解决方案 #

方案1：用join()拼接成无分隔符的字符串 #

这是最简单的方法，直接用join('')把数组里的HTML片段拼接成一个完整的字符串，再赋值给innerHTML：

let varArray = []; 
let rufus1 = document.getElementById('rufus1'); 
let rufus2 = document.getElementById('rufus2');

function arrayGiver() {
  // 向数组中添加HTML片段
  varArray.push('<div>' + rufus1.value + '</div>');
  varArray.push('<div>' + rufus2.value + '</div>');
  
  // 关键：用join('')消除逗号，再赋值给目标元素
  let targetElement = document.getElementById('your-target-id'); // 替换成你的目标元素ID
  targetElement.innerHTML = varArray.join(''); // 用''表示无分隔符，也可以用' '加空格
}

方案2：用循环手动拼接字符串 #

如果你想用for循环实现，要先初始化一个空字符串，然后把数组元素逐个加进去，最后再赋值：

let varArray = []; 
let rufus1 = document.getElementById('rufus1'); 
let rufus2 = document.getElementById('rufus2');

function arrayGiver() {
  varArray.push('<div>' + rufus1.value + '</div>');
  varArray.push('<div>' + rufus2.value + '</div>');
  
  let htmlContent = '';
  // 用for...of循环拼接
  for (let item of varArray) {
    htmlContent += item;
  }
  
  // 或者用forEach
  // varArray.forEach(item => htmlContent += item);
  
  document.getElementById('your-target-id').innerHTML = htmlContent;
}

小提醒 #

记得每次调用arrayGiver时，如果需要清空数组避免重复内容，可以在函数开头加一句varArray = [];，不然数组会越积越多哦！

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