How do I add a non-breaking whitespace in JavaScript without using innerHTML?

Question

I'm generating content dynamically and in some instances, I need to set a   as the only content of a <span> element.

However, the following adds   as text vs adding a empty space:

var foo = document.createElement("span")
foo = document.createTextNode("&nbsp;");

which makes sense, so I'm wondering, how would I add   correctly without (!) using innerHTML

Thanks for help!

@David: because I was looking for a way to run this through an existing method without having to add an extra clause to use `innerHTML` in case I need to add a whitespace. — frequent, Nov 06 '13 at 11:01

score 96 · Accepted Answer · answered Nov 06 '13 at 10:56

96

You can use a unicode literal for a non breaking space:

var foo = document.createTextNode("\u00A0");

answered Nov 06 '13 at 10:56

vcsjones

5

text = text.replace(/\s/g, '\u00A0'); - replaces all spaces with their unicode literal – Combine Feb 02 '17 at 12:49
This is perfect. It also works in the JQuery `text()` command: `link.text("(hide\u00A0info)");` – Grant Birchmeier Apr 11 '17 at 15:24

score 15 · Answer 2 · edited Oct 05 '17 at 10:37

15

If you don't want to use innerHTML, you can use a hexadecimal escape.

The most common:

In your case: \xC2\xA0

edited Oct 05 '17 at 10:37

neonblitzer

answered Nov 06 '13 at 10:58

CodeFanatic

1

Check out this site for more Information[link] http://www.utf8-chartable.de/unicode-utf8-table.pl?start=128&number=128&utf8=string-literal&unicodeinhtml=hex – CodeFanatic Nov 06 '13 at 11:07

score 3 · Answer 3 · answered Feb 24 '21 at 14:15

3

Append the non breaking space to your parent node, let us refer to it as "parent" below i.e.:

parent.append("\u00A0");

source: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

answered Feb 24 '21 at 14:15

Sinan Gabel

1

I see you are new to the platform. You should not answer a question unless you have something that was not covered by the existing answers. – Bob Feb 24 '21 at 15:49
I believe that the use of .innerHTML is a bad choice for a adding a simple as it is very slow and also may add to security risk; thus my answer should be seen in that context. – Sinan Gabel Feb 25 '21 at 16:26
So, make your point in the answer :) explain why innerHTML is a bad choice, add references, you can create code snippets and you may show that it is slow. And welcome to the comunity – Bob Feb 25 '21 at 18:35

3 Answers3