换行符不使用jQuery的.text（）工作

我有下面的代码： -换行符不使用jQuery的.text（）工作

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

哪有我可以在每个键值对之后用新的换行符显示我的模式，就像它在控制台中显示的那样？

来源

2017-07-24 kss

尝试输入换行符到原始HTML;你会发现它在浏览器中显示时不会显示出来。通过脚本添加时也是如此。 –

在模式中，不会有换行符通过换行符 - 模式的内容（除非是textarea）将是纯HTML，换行符不是。是否有你不使用.html（）而不是.text（）的理由？ – Snowmonkey

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

来源

2017-07-24 18:25:45 mhodges

完全同意你的意见！ –

这是完美的谢谢！我使用了
和.html（） – kss

@kss的组合，请注意，如果您的'dataList'属性将包含html标记或实体，则结果将不会很好，因为它们将被视为HTML。在你的情况下'white-space：pre'可能是更好更安全的解决方案。 – Inferpse

只需<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';

}

来源

2017-07-24 18:38:54

^这仍然需要.html（）而不是.text（） – kss

换行符不使用jQuery的.text（）工作

回答

相关问题