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

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  
• \x0D – carriage return or \r
• \x0A – newline or \n
• \x09 – tab or \t

In your case: \xC2\xA0

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

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

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