如何在不使用CSS的情況下保留動態添加的javascript DOM元素中的空白？

當爲了對齊的目的而添加一個帶有小空白字符的文本時，將空白字符刪除（在c＃中添加空白字符，所以當它到達前端時，它不能被編輯 - 這樣就好了使用一些CSS來做到這一點，但它不是一個選項）。如何在不使用CSS的情況下保留動態添加的javascript DOM元素中的空白？

這裏是我試過到目前爲止：

<div id="testDiv"></div> 
<script type="text/javascript"> 
var zlp = document.getElementById("testDiv"); 
zlp.innerHTML = "hello    hello"; 
var zzz = document.createTextNode("hello    hello"); 
zlp.appendChild(zzz); 
</script>

這兩者產生hello hello。

來源

2012-05-06 Travis J

與像'foo.innerHtml =嘗試 'BLA bla'.replace（'' ，' '）' – elclanrs

[Javascript當它不應該刪除空白時可能出現重複]（http://stackoverflow.com/questions/213845/javascript-removing-whitespace-when-it-shouldnt） – DanM7

White space characters are usually collapsed in HTML (by default)。

您可以用 實體替換：

var text = text.replace(/\s/g, '&nbsp;');

\s將匹配任何空白字符，如空格，製表符和新行。如果您只想更換空間，請改用/ /g。

這避免字符串操作的其他選項：

放在一個pre element文本。
設置CSS 2 white-space屬性爲pre爲@Esailija指出。您可以隨時將CSS屬性動態添加到元素，而不必在樣式表中指定它們。

來源

2012-05-06 22:10:38

好的並不總是，你可以使用像'white-space：pre;'的css; – Esailija

@Esailija：好點... –

有人說下面，OP - >「Css in a option」 – gotofritz

白色空間在HTML中摺疊。這不是一個JS問題，如果您在HTML文檔中手動輸入，也會發生同樣的問題。您需要用&替換空格;

zlp.innerHTML = "hello    hello".replace(/ /g, "&nbsp;");

來源

2012-05-06 22:11:04 gotofritz

-1

使用

zlp.innerHTML = "hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello";

像其他人一樣只是說。

來源

2012-05-06 22:11:19 PitaJ

您的意思是' '？ –

是的，這是一個大錯字 – PitaJ

使用HTML標記 '預'

實施例：

<pre> 
A line 
    A line with indent 
</pre>

結果：

 
A line 
    A line with indent

來源

2017-09-17 22:44:03

如何在不使用CSS的情況下保留動態添加的javascript DOM元素中的空白？

回答

相關問題