如何在不使用 CSS 的情况下在动态添加的 javascript DOM 元素中保留空格？

Question

当添加带有小空格的文本以用于对齐目的时，空格会被修剪掉（空格是在 c# 中添加的，所以当它到达前端 Javascript 时，它无法编辑 - 它只使用一些 CSS 来做到这一点会很好，但这不是一种选择）。

这是我目前尝试过的：

var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello                hello"
var zzz = document.createTextNode("hello                hello")
zlp.appendChild(zzz)

<div id="testDiv"></div>

两者都产生hello hello。

Answer 1

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

您可以将其替换为  实体：

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

\s 将匹配任何空白字符，例如空格、制表符和换行符。如果只想替换空格，请改用/ /g。

避免字符串操作的其他选项：

• 将文本放入pre element。
• 将 CSS 2 white-space 属性设置为 pre，正如 @Esailija 指出的那样。您始终可以为元素动态添加 CSS 属性，而不必在样式表中指定它们。

Answer 2

空白在 HTML 中折叠。这不是 JS 问题，如果您在 HTML 文档中手动键入，也会发生同样的情况。您需要将空格替换为  

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

Answer 3

使用

zlp.innerHTML = "hello     hello";

就像其他人刚才所说的那样。

Answer 4

使用 html 标签 'pre'

例子：

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

结果：

一条线 带缩进的一行