解决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 即可

版权声明:
作者:超级管理员
链接: https://apecloud.ltd/article/detail.html?id=91
来源:猿码云个人技术站
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
/static/admin/img/weixin.jpg/static/admin/img/zfb.jpg
<<上一篇>
jq tree_table 动态生成加载,不同的column
下一篇>>