CODEWITHSUNDEEP
javascriptwhitespaceinnerhtmlcreateelementcreatetextnode
frequent
frequent

Reputation: 28513

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

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

However, the following adds &nbsp; 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 &nbsp; correctly without (!) using innerHTML

Thanks for help!

Upvotes: 47

Views: 76728

Answers (3)

Sinan Gabel
Sinan Gabel

Reputation: 51

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

Upvotes: 5

CodeFanatic
CodeFanatic

Reputation: 11474

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

The most common:

  • \x20 – standard space or \s
  • \xC2\xA0 – non-breaking space or &nbsp;
  • \x0D – carriage return or \r
  • \x0A – newline or \n
  • \x09 – tab or \t

In your case: \xC2\xA0

Upvotes: 18

vcsjones
vcsjones

Reputation: 141648

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

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

Upvotes: 112

Related Questions