如何在不使用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属性,不必在样式表中指定它们.