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

当添加带有附加小空格的文本以进行对齐时，空格会被删除（空格是用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>

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

var zlp=document.getElementById（“testDiv”）；
zlp.innerHTML=“你好”；
var zzz=document.createTextNode（“hello”）；
zlp.appendChild（zzz）；

这两种方法都会产生

hello-hello

您可以将其替换为

实体：

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

\s

将匹配任何空白字符，如空格、制表符和换行符。如果只想替换空格，请使用

//g

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

• 把课文放在一张纸上
• 如前所述，将css2

  whitespace

  属性设置为

  pre

  。您始终可以将CSS属性动态添加到元素中，它们不必在样式表中指定

---

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

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

使用

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

使用html标记“pre”

例如：

一行
缩进线

结果:

一行 缩进线

---

不一定，你可以使用css，比如

空白：pre

正如下面有人所说，OP->“Css不是一个选项”，严格来说\s！=''。只是为了记录。@FelixKling-

var pr=document.createElement（“pre”）；pr.innerHTML=“你好”；zlp.appendChild（pr）工作。谢谢没有CSS，就无法保持正常连续空格的精确行为。诸如
之类的HTML空白实体不会换行，这使得它们相似但不相同。其他HTML空白空间实体，如
&thinsp，
&ensp和
&emsp也不换行。如果CSS是一个选项，
空白：pre-line
将是您的答案。尝试类似于
foo.innerHtml='bla bla'。替换（''，）
的可能重复项
<pre>
A line
   A line with indent
</pre>

A line
   A line with indent