CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ck Maurya
Ck Maurya

Reputation: 2255

jquery .append trims the spaces automatically

I am trying to append new data to the container div using jquery .append() function. But, the output appended trims the spaces between the labels created. Check the screenshot attached:enter image description here

How can I fix this issue?

Javascript and HTML code are given below:

$("a.add-member").click(function(){
  var user = '<div class="row user">'+
      '<div class="col-md-6">[email protected]</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">[email protected]</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">[email protected]</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>

Upvotes: 1

Views: 90

Answers (2)

Rahul Khandelwal
Rahul Khandelwal

Reputation: 104

Since you have written your code in HTML in different line for each span but when you add div or anything in through jQuery by creating a string it consider it as a single line. So if you add \n at each line it will work.

user = '<div class="row user">' +
                '<div class="col-md-6">[email protected]</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);

Upvotes: 0

Ck Maurya
Ck Maurya

Reputation: 2255

Added spaces in jQuery code:

$("a.add-member").click(function(){
    var user = '<div class="row user">'+
                    '<div class="col-md-6">[email protected]</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);
})

Upvotes: 1

Related Questions