Javascript 如何在jQuery函数text（）中添加新行

我想在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;                              
             detailsDiv.text("UserName: "+userName+"ID: "+ID+"Email: "+Email+"Dish: "+Dish);
         }, 

检查上面代码中的以下行：

detailsDiv.text（“用户名：“+UserName+”ID:“+ID+”电子邮件：“+Email+”Dish:+Dish”）
它给出的输出如下：
UserName:Ravi ID:123电子邮件：ravi@gmail.com菜肴：印度菜

我想要像这样的输出

UserName: Ravi  
ID: 123  
Email:ravi@gmail.com  
Dish: Indian Dishes

您可以使用
p
元素作为示例和方法：

detailsDiv.append（'UserName:'+UserName+'
'）；
detailsDiv.append（'ID:'+ID+'
'）；
detailsDiv.append（“电子邮件：”+Email+“
”）；
细节iv.追加（“Dish:”+Dish+“
”）；
您可以使用
p
元素作为示例和方法：

detailsDiv.append（'UserName:'+UserName+'
'）；
detailsDiv.append（'ID:'+ID+'
'）；
detailsDiv.append（“电子邮件：”+Email+“
”）；
细节iv.追加（“Dish:”+Dish+“
”）；
将
.text
更改为
.html
并使用

元素，插入换行符：

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

detailsDiv.html（“用户名：+UserName+”
ID：+ID+”
Email：+Email+”
Dish：+Dish）；
//                                      ^^            ^^                  ^^

如果您正在编写XHTML，则必须关闭

标记，如下所示：

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

detailsDiv.html（“用户名：“+UserName+”
ID://。。。
将
.text
更改为
.html
并使用

元素，插入换行符：

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

detailsDiv.html（“用户名：+UserName+”
ID：+ID+”
Email：+Email+”
Dish：+Dish）；
//                                      ^^            ^^                  ^^

如果您正在编写XHTML，则必须关闭

标记，如下所示：

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

detailsDiv.html（“用户名：“+UserName+”
ID://。。。
试试这个…

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:





试试这个…

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:





detailsDiv.html（“用户名：+UserName+”
ID：+ID+”
电子邮件：+Email+”
Dish:+Dish）；
可能的重复项您真的需要显示所有Ajax代码来询问显示换行符吗？这显然不是链接问题的重复项，但显示了对浏览器渲染的误解。@Bhojendra Sah，谢谢它正在工作。…
detailsDiv.html（“用户名：+UserName+”
ID:+ID+“
电子邮件：“+Email+”
碟子：“+Dish”）
的可能重复项您真的需要显示所有Ajax代码来询问显示换行符吗？这显然不是链接问题的重复项，但显示了对浏览器渲染的误解。@Bhojendra Sah，谢谢它正在工作……我不推荐此解决方案，因为使用
$.html
意味着目标中“打印”的字符不会被净化，实际上会转换为文本。所以？净化，然后添加换行符，然后打印。像@Deena这样的解决方案是最佳的，但是使用
$。text
不是
$。html
我不推荐这种解决方案，因为使用
$。html
意味着字符“在目的地打印”不会被净化，实际上会转换为文本。所以？净化，然后添加换行符，然后打印。像@Deena这样的解决方案是最佳的，但使用
$。text
而不是
$。html