换行符不适用于 jQuery .text()答案

【问题标题】：Line break not working with jQuery .text()换行符不适用于 jQuery .text()
【发布时间】：2017-12-30 10:39:48
【问题描述】：

我有以下代码：-

function data(x) {
     var dataList = "";
     for (var key in obj) {
          dataList += key + ": " + obj[key] + "\n"
     }
     $('#modalText').text(dataList);
     document.getElementById('dataModal').style.display='block';
}

它会像这样填充 HTML：

<p id="dataList"></p>

虽然在循环的每次迭代中我都有一个 '\n' 连接到我的字符串，但我无法在每个键/值对之后换行以显示在我的模态中。我也尝试过 jQuery .append() 函数而不是 .text()，但无济于事。

我的变量 dataList 在控制台中打印，并带有适当的换行符，如下所示：

key: 123
time: 12:00
department: taxes

但是在模态打印时，没有换行符：

key: 123 time: 12:00 department: taxes

我怎样才能让它在我的模式中显示，每个键值对后都有一个新的换行符，就像它在控制台中显示的那样？

【问题讨论】：

尝试在原始 HTML 中输入换行符；您会看到它在浏览器中显示时不会显示。通过脚本添加时相同的交易。
在模式中，不会通过换行符换行——模式的内容（除非它是文本区域）将是纯 HTML 而换行不是。您不使用 .html() 而不是 .text() 是否有原因？

标签： javascript jquery loops key-value line-breaks

【解决方案1】：

空白在 HTML 中没有任何意义。您需要使用<br/> 并设置.html()，或者您需要将white-space: pre 添加到您的dataList <p> 标记中。使用 pre 或 pre-wrap 将尊重空格（因此 \n 字符）

【讨论】：

完全同意你的看法！
这太完美了，谢谢！我使用了
和 .html() 的组合
@kss 请注意，如果您的 dataList 属性将包含 html 标记或实体，则结果不会很好，因为它们将被视为 HTML。在您的情况下，white-space:pre 可能是更好、更安全的解决方案。
@kss 请注意，每次设置 .html() 时，您都可能容易受到脚本注入的攻击。除非您绝对确定数据不会被有害脚本破坏，否则我会远离设置 HTML（如果可能）

【解决方案2】：

只需<br>就足以获得换行符而不是“/n”，如下面的代码所示。

 function data(x) {
 var dataList = "";
 for (var key in obj) {
      dataList += key + ": " + obj[key] + "<br>"
 }
 $('#modalText').text(dataList);
 document.getElementById('dataModal').style.display='block';

}

【讨论】：

^这仍然需要 .html() 而不是 .text()