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

Question

When adding in text with small whitespace appended to it for alignment purposes the whitespace is trimmed off (the whitespace is added in c# so by the time it gets to front end Javascript it cannot be edited - it would be nice to just use some CSS to do this but it is not an option ).

Here is what I tried so far:

<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>

Both of which produce hello hello .

Answer 1

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

You can replace it with the   entity:

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

\\s will match any white space character, such as space, tab and new line. If you only want to replace space, use / /g instead.

Other options which avoid string manipulation:

• Put the text in a pre element .
• Set the CSS 2 white-space property to pre as @Esailija pointed out. You can always add CSS properties dynamically to elements, they don't have to be specified in a style sheet.

Answer 2

White space is collapsed in HTML. It's not a JS issue, the same would happen if you typed that manually in the HTML document. You need to replace the spaces with  

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

Answer 3

use

zlp.innerHTML = "hello     hello";

Like everyone else just said.

Answer 4

use a html tag 'pre'

Example:

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

result:

A line
   A line with indent