将带有换行符和制表符的 JavaScript 字符串添加到 HTML 元素答案

【问题标题】：Add JavaScript String with line breaks and tabs to HTML element将带有换行符和制表符的 JavaScript 字符串添加到 HTML 元素
【发布时间】：2016-10-07 13:37:27
【问题描述】：

我有这个 HTML：

<p id="element">Waiting for Message</p>

这个来自服务器的字符串使用 JSON.stringify() 并带有中断和制表符，即

var = "Heading (info:info) \n info: \n \t and so on "; // The actual string is more complex though, just an example

这个Jquery把字符串贴到段落标签：

$("#element").text(data); // data is the string from the server(not in JSON!)

问题是 HTML 忽略了格式，但是当我使用警告框时，它会以正确的格式显示。当数据来自服务器时，我正在动态更新元素。有什么指点吗？

【问题讨论】：

使用 pre 而不是 p 标签。

您可以将其括在

 标记中或将换行符更改为 
 以在 HTML 中进行换行符。

是否有任何库可以基于包含新行和标签的长字符串创建树视图？ @KRichardson

标签： javascript jquery html ajax

【解决方案1】：

您应该告诉浏览器尊重这些空白。简单的方法是使用white-space: pre 规则：

var data = "Heading (info:info) \n info: \n \t and so on "; 

$("#element").html(data);

#element {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="element">Waiting for Message</p>

【讨论】：

【解决方案2】：

在 HTML 中使用 pre tag 并在那里更新您的文本

$(document).ready(function(){

var data = {
    "id": "1",
    "nome": "erwrw",
    "cognome": "sdsfdfs",
    "CF": "qwert",
    "eta": "27",
    "sesso": "uomo",
    "indirizzo": "qwerrt",
    "luogo": "wewrw",
    "provincia": "ewrewrw",
    "citta": "erwrwr",
    "comune": "ewrewrw"
  }

var obj = JSON.stringify(data, null, 4);
$('#element').text(obj);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="element">Waiting for Message</pre>
<button id="btn">send</button>

【讨论】：

【解决方案3】：

$("#element").html(data.replace(/(\n)/g, '<br>'));

【讨论】：