解决js生成的html和原生html的样式不一致的问题

在最近的后台生成代码中发现 js动态的生成html 和 直接复制粘贴的样式不一致

模板使用的是 Light-Year-Admin-Template 

js生成代码为  

<span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span><span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span><span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span>

原生html

<span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span>
<span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span>

<span data-value="2020/11/30-2020/12/06" class="label label-success">2020/11/30-2020/12/06&nbsp;&nbsp;<a href="#" class="remove-choose" title="移除">x</a></span>

对比发现代码是一样的唯一的区别就是 换行的问题 解决思路在动态生成代码后面 加 '/n'

所以修改代码

let html = '\n'+
        "<span data-value=\""+time_select+"\" class=\"label label-success\">"+time_select+"&nbsp;&nbsp;<a href=\"#\" class=\"remove-choose\" title=\"移除\">x</a></span> \n";
$(this).closest('.searchForm').find('.time-box').append(html);

至此问题解决

注意 appendTo 写法无效，改为append 即可