innerHTML不尊重縮進

我有一個客戶端的代碼，通過與node.js後端socket.io接收一些數據。我收到一些縮進的數據（這是一些字符串格式的代碼）。我可以將代碼警告出來，並且我發現它在警報中縮進，但是當我執行document.getElementById('myDiv').innerHTML = receivedData.indentedData時，myDiv中輸出的數據不是縮進的，而是隻在一行中。innerHTML不尊重縮進

您是否知道在填充HTML元素時在某些字符串中使用縮進的方法？

更精確地說我以這種形式提醒數據：

class Motto { 
    public static void main(String[] args) { 
    System.out.println("Java rules!"); 
    } 
}

但我在myDiv看到是這樣的：

class Motto { public static void main(String[] args) { System.out.println("Java rules!"); } }

感謝

來源

2011-11-01 Masiar

大多數情況下，輸出這樣的代碼，你會想把它包裝在<pre>和<code>標籤中。

document.getElementById('myDiv').innerHTML = "<pre><code>"+receivedData.indentedData+"</code></pre>";

這就是StackOverflow降價編輯器爲代碼片斷所做的。

來源

2011-11-01 21:45:41

哇，很酷！從我+1。 – thejh

更換\n與<br>。您可能知道，換行符不會像HTML一樣顯示，但會被視爲空格。

來源

2011-11-01 21:44:45 GolezTrol

試試這個：

document.getElementById('myDiv').innerHTML = 
    receivedData.indentedData.replace(/\n/g, '<br>');

在HTML，換行符被忽略，你必須使用<br>換行。

來源

2011-11-01 21:44:50 thejh

innerHTML尊重縮進。問題在於HTML本身如何表示數據：它將所有空格顯示爲單個空格。替換\n與<br>只是一個部分解決方案，因爲選項卡不會被保存。在你的CSS中更好地使用#myDiv { white-space: pre; }。

來源

2011-11-01 21:45:50 duri

innerHTML不尊重縮進

回答

相關問題