javascript - jquery .append trims the spaces automatically -
i trying append new data container div using jquery .append() function. but, output appended trims spaces between labels created. check screenshot attached:
how can fix issue?
javascript , html code given below:
$("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>
added spaces in jquery code:
$("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); })
Comments
Post a Comment