Loosing margin with javascript jquery -

why when add same html code javascript jquery loose margin ?
try jsfiddle , understand me.

jquery

 function addphone() { $( "#phonedetails" ).append( '<div  >' +     '<label>phone :</label>' +     '<input type="text" /> '   +       '<input type="button" onclick="addphone()"/>'    +                            '</div>');     } 

html

<div id="phonedetails">     <div>         <label>phone :</label>         <input type="text" />              <input type="button" onclick="addphone();"/>     </div> </div> 

it isn't margin, space (i.e. when press space bar) between label , input. missing in code generated js.

change:

'<label>phone :</label>' + 

to:

'<label>phone :</label> ' +                   //   ^ space here