如何在不使用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