Why am I not able to insert text nodes which only have zero width whitespaces set?

Question

I am trying to insert whitespace text nodes using JS but it's simply not working. Is the innerHtml property getting ignored for a TextNode?

See my JSFiddle

insertWhitespace = function() {

  var contentEditable = document.getElementById("txt");
  var element = document.getElementById("annyoing-html");

  var textNodeLeft = document.createTextNode("");
  var textNodeRight = document.createTextNode("");

  textNodeLeft.innerHtml = "&#8203;";  
  textNodeRight.innerHtml = "&#8203;";

  contentEditable.insertBefore(textNodeLeft, element);

  if(element.nextSibling != null) {     
    contentEditable.insertBefore(textNodeRight, element.nextSibling);  
  } else {
    element.appendChild(textNodeRight);
  }
};

I actually plan to insert zero whitespace characters but it's not working like this anyway.

How can I insert such text nodes?

It's a text node - why do you think you should be using an *HTML* related property? — Alnitak, Apr 25 '16 at 13:33
Let me be more explicit - text nodes _do not have an `innerHTML` property_ — Alnitak, Apr 25 '16 at 13:52
@Alnitak Okay, got it. The browser however doesn't mind and/or tell me that I am writing on a property that doesn't exist.. Also GWT allows to cast the Node to Element which made me thing there is a property .. — Stefan Falk, Apr 25 '16 at 13:54
*Any* JS object can have any property added to it without complaint (unless the object is "frozen"). Either way, you should pass the desired string in the `createTextNode()` factory method, in Unicode syntax (`\u200b`) — Alnitak, Apr 25 '16 at 13:56

score 2 · Answer 1 · answered Apr 25 '16 at 13:44

HTML entities (&entity;-formatted strings) are, shockingly, for HTML.

For JavaScript, you need to use JavaScript escape sequences.

In this case, non-breaking space, which is \xA0

However, it is very bad practice to chain NBSPs together to artificially create space. You should be using margins, padding, positioning... ANYTHING, so long as it's CSS. Spacing is part of presentation, and presentation is the job of CSS.

For completeness, you can use normal spaces (" ") provided you set the container's CSS to include white-space: pre-wrap to make the whitespace significant.

score 2 · Answer 2 · answered Apr 25 '16 at 13:46

2

As has been stated before,   is a HTML entity. You are trying to fill a text node, not HTML.

Therefore, to fill a "non-breaking whitespace" ( ) into a text node, you can use its unicode character code:

var textNode = document.createTextNode("\xA0");
// or
var textNode2 = document.createTextNode("");
textNode2.data = "\xA0";   // or
textNode2.textContent = "\xA0";

answered Apr 25 '16 at 13:46

Leon Adler

2,993
1
29
42

I only used ` ` to immediatelly see an effect - actually I need `` which is a zero width whitespace character. But I'll try your suggestion. – Stefan Falk Apr 25 '16 at 13:49

score 1 · Accepted Answer · answered Apr 25 '16 at 14:00

Text nodes do not have a .innerHTML property (nb: note the case)

The simplest solution is to simply specify the right content as Unicode literals when you create the elements:

var textNodeLeft = document.createTextNode("\u200b");
var textNodeRight = document.createTextNode("\u200b");

score 0 · Answer 4 · answered Apr 25 '16 at 13:40

0

Yes, text nodes don't have the .innerHTML property. Only HTMLElements do. So, this will work:

var textNodeLeft = document.createElement("span");
textNodeLeft.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";

answered Apr 25 '16 at 13:40

Ozrix

3,489
2
17
27

Why am I not able to insert text nodes which only have zero width whitespaces set?

4 Answers4