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

Question

當添加帶有小空格的文本以進行對齊時，空白被修剪掉（空格被添加到c＃中，所以當它到達前端時Javascript它無法編輯 - 只需使用一些CSS就可以了。這樣做，但它不是一個選項 ）。

這是我到目前為止嘗試的內容：

<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 。

Answer 1

空格字符通常在HTML中折疊（默認情況下） 。

您可以將其替換為  實體：

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

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

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

• 將文本放在pre元素中 。
• 將CSS 2 white-space屬性設置為pre為@Esailija指出。 您始終可以動態地向元素添加CSS屬性，不必在樣式表中指定它們。

Answer 2

HTML中的空格已折疊。 這不是JS問題，如果您在HTML文檔中手動輸入，也會發生同樣的問題。 您需要用＆nbsp;替換空格

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

Answer 3

采用

zlp.innerHTML = "hello     hello";

就像其他人剛剛說的那樣。

Answer 4

使用html標簽'pre'

例：

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

結果：

A line
   A line with indent