如何保持在动态添加JavaScript的DOM元素的空白，而无需使用CSS？(How to pres

当与附加到它为了对准空白被修剪掉小的空白文本添加（空格是在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>
A line
   A line with indent
</pre>

结果：

A line
   A line with indent

文章来源: How to preserve whitespace in dynamically added javascript DOM element without using CSS?