为什么我用这个 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 函数的 cal 完成的。

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>'

Answer 2

//works as answered above
result+='<span class="badge badge-secondary"> ' + opt.text + '</span>';
//but it is better without spaces between the + + unless you are concatinating different data types
result+='<span class="badge badge-secondary"> '+opt.text+'</span>';
//or you could just create and re-use a new variable like ...
var x=' '; // or x='&nbsp;'
//then use like...
somestring+=somewordVAR+x;
//so on so fourth