javascript - jquery .append 自动 trim 空格

标签 javascript jquery html css

我正在尝试使用 jquery .append() 函数将新数据附加到容器 div。但是,附加的输出 trim 了创建的标签之间的空间。查看随附的屏幕截图:enter image description here

我该如何解决这个问题?

Javascript 和 HTML 代码如下:

$("a.add-member").click(function(){
  var user = '<div class="row user">'+
      '<div class="col-md-6">abc@site.com</div>'+
      '<div class="col-md-4">'+
      '<div class="user-roles">'+
      '<span class="label label-user-role">Role 1</span>'+
      '<span class="label label-user-role">Role 2</span>'+
      '<span class="label label-user-role active">Role 3</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);
});
<div class="users">
  <div class="row user">
    <div class="col-md-6">xyz@site.com</div>
    <div class="col-md-4">
      <div class="user-roles">
        <span class="label label-user-role">Role 1</span>
        <span class="label label-user-role">Role 2</span>
        <span class="label label-user-role active">Role 3</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>
  <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>
        <span class="label label-user-role">Role 2</span>
        <span class="label label-user-role active">Role 3</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>
</div>

最佳答案

在 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);
})

关于javascript - jquery .append 自动 trim 空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30636900/

相关文章:

html - 与嵌套 Bem 类混淆

javascript - node.js 中模块模式的最佳实践

javascript - 如何支持 API 调用以使用 Promise 或带有标准 Promise 的回调,无延迟或外部 Promise 库?

jquery - 使用 div 显示在两个选项卡/表格之间切换

javascript - 寻找一种在 HTML 中卡住表格行和列的方法

jquery - 验证与产品相关的每个下拉列表(选择列表)

javascript - getAttributeNS 的行为是什么?

html - 在Chrome和Firefox中播放实时流音频时出现问题

javascript - 如何通过html更改fullcalendar io的一个字段?

javascript - Vue 列表项在状态更改时不会重新渲染