換行符不使用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（）工作

回答

相關問題