How to preserve whitespace in dynamically added javascript DOM element without using CSS?

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:

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

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

Both of which produce hello hello.

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

Solution 2

use  

zlp.innerHTML = "hello     hello";

Like everyone else just said.

Comments

[Esailija]

well not always, you can use css like white-space: pre;

[gotofritz]

as someone said below, OP -> "Css in not an option"

[gotofritz]

also, strictly speaking \s !== ' '. Just for the record.

[Travis J]

@FelixKling - var pr = document.createElement("pre"); pr.innerHTML = "hello hello"; zlp.appendChild(pr); worked. Thanks!

[mikabytes]

Without CSS there is no way to preserve the exact behavior of normal consecutive spaces. The HTML white space entities such as   does not wrap on line-break, which makes them similar but not the same. The other HTML white space entities such as  ,   and   also does not wrap. If CSS was an option, the white-space: pre-line; would be your answer.