I want to insert new line in jQuery function.

$.ajax({ 
        url:"http: //192.168.1.4/Experiements/webservices/api.php", 
        type:"GET", 
        dataType:"json", 
        data:{type:"login", UserName:userId,Password:userPassword}, 
        ContentType:"application/json", 
        success: function(response){                        
        alert(JSON.stringify(response));                                   
              var detailsDiv=$("div#details");
              var userName=response[0].User.UserName;                              
              var ID=response[0].User.Followers;
              var Email=response[0].User.email;
              var Dish=response[0].User.Dish;                              
             detailsDiv.text("UserName: "+userName+"ID: "+ID+"Email: "+Email+"Dish: "+Dish);
         }, 

Check the following line in above code: detailsDiv.text("UserName: "+userName+"ID: "+ID+"Email:"+Email+"Dish: "+Dish); It is giving output like: UserName: Ravi ID: 123 Email:[email protected] Dish: Indian Dishes

I want output like

UserName: Ravi  
ID: 123  
Email:[email protected]  
Dish: Indian Dishes

I want to insert new line in jQuery function.

$.ajax({ 
        url:"http: //192.168.1.4/Experiements/webservices/api.php", 
        type:"GET", 
        dataType:"json", 
        data:{type:"login", UserName:userId,Password:userPassword}, 
        ContentType:"application/json", 
        success: function(response){                        
        alert(JSON.stringify(response));                                   
              var detailsDiv=$("div#details");
              var userName=response[0].User.UserName;                              
              var ID=response[0].User.Followers;
              var Email=response[0].User.email;
              var Dish=response[0].User.Dish;                              
             detailsDiv.text("UserName: "+userName+"ID: "+ID+"Email: "+Email+"Dish: "+Dish);
         }, 

Check the following line in above code: detailsDiv.text("UserName: "+userName+"ID: "+ID+"Email:"+Email+"Dish: "+Dish); It is giving output like: UserName: Ravi ID: 123 Email:[email protected] Dish: Indian Dishes

I want output like

UserName: Ravi  
ID: 123  
Email:[email protected]  
Dish: Indian Dishes

• javascript
• jquery

Share Improve this question Follow edited Jan 2, 2015 at 13:07 AVM 59222 gold badges1111 silver badges2626 bronze badges asked Jan 2, 2015 at 12:48 Neelabh SinghNeelabh Singh 2,6781212 gold badges5555 silver badges9191 bronze badges 4

• 1 detailsDiv.html("UserName: "+userName+"<br />ID: "+ID+"<br />Email:"+Email+"<br />Dish: "+Dish); – Bhojendra Rauniyar Commented Jan 2, 2015 at 12:49
• possible duplicate of How to force a line break on a Javascript concatenated string? – emerson.marini Commented Jan 2, 2015 at 12:50
• 1 Did you really need to show all that Ajax code just to ask about displaying newlines? – nnnnnn Commented Jan 2, 2015 at 12:52
• 2 This is clearly not a duplicate of the linked question, but shows a misunderstanding of browsers' rendering in a similar vain. – JAAulde Commented Jan 2, 2015 at 12:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Change .text to .html and use <br> element, it inserts a line break:

detailsDiv.html("UserName: "+userName+"<br>ID: "+ID+"<br>Email: "+Email+"<br>Dish: "+Dish);
//                                      ^^            ^^                  ^^

If you are writing XHTML, then the <br> tag must be closed, like this <br />:

detailsDiv.html("UserName: "+userName+"<br />ID: //...

Try this...

jQuery:

$.ajax({ 
        url:"http: //192.168.1.4/Experiements/webservices/api.php", 
        type:"GET", 
        dataType:"json", 
        data:{type:"login", UserName:userId,Password:userPassword}, 
        ContentType:"application/json", 
        success: function(response){                        
        alert(JSON.stringify(response));                                   
              var detailsDiv=$("div#details");
              var userName=response[0].User.UserName;                              
              var ID=response[0].User.Followers;
              var Email=response[0].User.email;
              var Dish=response[0].User.Dish;                              
            $("#username").html(userName);
            $("#userid").html(ID);
            $("#email").html(Email);
            $("#dish").html(Dish);
         },
});

HTML:

         <p id="username"></p>
         <p id="userid"></p>
         <p id="email"></p>
         <p id="dish"></p>

You can use p elements for example and append method:

detailsDiv.append('<p>UserName: ' + userName + '</p>');
detailsDiv.append('<p>ID: ' + ID + '</p>');
detailsDiv.append('<p>Email: ' + Email + '</p>');
detailsDiv.append('<p>Dish: ' + Dish + '</p>');