javascript - 为什么我会因为这个 Javascript 函数而失去利润

Question

我正在使用 Bootstrap4，我有一个多选和一个单独的 div，显示当前选择的一系列徽章。 (因为如果使用移动设备，选择不会显示当前选择的内容，它只显示选择了多少个项目)

  <div class="form-control mb-2" id="fieldsCompleteness" name="fieldsCompleteness">                                
  <span class="badge badge-secondary">
      Acoustic
  </span>
  <span class="badge badge-secondary">
      Album
  </span>
  <span class="badge badge-secondary">
      Sort Album Artist
  </span>
  </div>

当用户更改选择时，必须更新徽章，这是通过调用此 Javascript 函数来完成的。

function getSelectValues(select, readonlylist)
{                             
      var result = '';
    var options = select && select.options;
    var opt;

    for (var i=0, iLen=options.length; i<iLen; i++)
    {
        opt = options[i];
        if (opt.selected)
        {
            result+='<span class="badge badge-secondary">' + opt.text + '</span>';
        }
    }
    readonlylist.innerHTML =result;
    return result;
}

这有效，只是每个徽章之间的边距消失了。我不明白为什么，因为看起来我只是用完全相同的内容替换现有的 Html(一系列跨度)。由于我误解了 innerHTML 的工作原理，它对外部 div 上定义的类有影响吗？

Answer 1

渲染 html 中的空格(徽章文本之前)(并减少为单个空格) - 您可以通过添加空格在 JS 中实现相同的效果，即更改

'<span class="badge badge-secondary">' + opt.text + '</span>'

至

'<span class="badge badge-secondary"> ' + opt.text + '</span>'