Javascript append自动修剪空格

我试图使用jquery.append（）函数将新数据附加到容器div。但是，附加的输出会修剪创建的标签之间的空间。检查附加的屏幕截图：

如何解决此问题

Javascript和HTML代码如下所示：

$（“a.add-member”）。单击（函数（）{
变量用户=“”+
'abc@site.com'+
''+
''+
“角色1”+
“角色2”+
“角色3”+
''+
''+
''+
''+
''+
'';
$（“#添加team.users”）.append（user）.hide（0）.fadeIn（700）；
});

xyz@site.com
角色1
角色2
角色3
pqr@site.com
角色1
角色2
角色3
在jQuery代码中添加空格：

$("a.add-member").click(function(){
    var user = '<div class="row user">'+
                    '<div class="col-md-6">ajinkya.bandagale@gmail.com</div>'+
                    '<div class="col-md-4">'+
                        '<div class="user-roles">'+
                            '<span class="label label-user-role">Admin</span> '+
                            '<span class="label label-user-role">Observer</span> '+
                            '<span class="label label-user-role active">Normal</span> '+
                        '</div>'+
                    '</div>'+
                    '<div class="col-md-2 text-center">'+
                        '<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>'+
                    '</div>'+
                '</div>';
    $("#add-team .users").append(user).hide(0).fadeIn(700);
})

$（“a.add-member”）。单击（函数（）{
变量用户=“”+
“阿金卡。bandagale@gmail.com'+
''+
''+
“管理员”+
“观察员”+
“正常”+
''+
''+
''+
''+
''+
'';
$（“#添加team.users”）.append（user）.hide（0）.fadeIn（700）；
})
因为您已经在HTML中以不同的行为每个跨度编写代码，但是当通过创建字符串时通过jQuery添加DIV或任何东西时，它将其视为单行。
因此，如果您在每行添加\n，它将起作用
user = '<div class="row user">' +
                '<div class="col-md-6">pqr@site.com</div>' +
                '<div class="col-md-4">' +
                '<div class="user-roles">' +
                '<span class="label label-user-role">Role 1</span>\n' +
                '<span class="label label-user-role">Role 2</span>\n ' +
                '<span class="label label-user-role active">Role 3</span>\n ' +
                '</div>' +
                '</div>' +
                '<div class="col-md-2 text-center">' +
                '<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>' +
                    '</div>' +
                '</div>';
                $(".users").append(user).hide(0).fadeIn(700);

user=''+
'pqr@site.com' +
'' +
'' +
“角色1\n”+
'角色2\n'+
“角色3\n”+
'' +
'' +
'' +
'' +
'' +
'';
$（“.users”）.append（user）.hide（0）.fadeIn（700）；
jQuery中没有空格。这可能就是问题所在。从原始HTML中删除空格，然后使用
填充
或
边距
。空格的宽度不可靠，因为它们在浏览器和操作系统之间会发生变化。但是，我也没有在HTML中输入任何空格。但它仍然可以完美地工作。那么为什么不使用jquery呢？