Helpful Information
 
 
Category: DOM and JSON scripting
adding non-breaking spaces in createTextNode

how to add non-breaking spaces in createTextNode?
i've tried these 3 ways but to no avail:
objText = document.createTextNode(" "+arrHist[i]+" ");
objText = document.createTextNode("  "+arrHist[i]+"  ");
objText = document.createTextNode("  "+arrHist[i]+"  ");

Well, the reason the last two don't work is because using the
createTextNode and innerText method and attribute (respectively),
both escape the characters automatically, but I would think, that
being the case, that the first method would work, are you sure it
doesn't? I tried it using IE6, and it worked fine.

Try putting text in the element that the new Node will be appended
to, before the end tag. Using the first method, it should work.


Guardian

if i insert several spaces before and after the text, it just inserts nothing or maybe 1 space but if in between the text, it's ok. here's the snippet:



objText = document.createTextNode(" "+(i+1)+" "+arrHist[i]+" ");
objTD.appendChild(objText);
objTR.appendChild(objTD);
objTbl.appendChild(objTR);


im actually filling text inside the cell of a table and i want to have 2-3 spaces before and after the text.

see the snapshot.

Hmmm...

I'm assuming that you are using Mozilla or another browser with
the same base?

 Well, I tried using innerHTML, but it doesn't seem to take the +=
operator very well.

 But I did figure out why you can't add extra white-space
with the createTextNode() method. The browser treats it like a
normal Text-Node and truncates it, so you either have to stick with
the W3C deprecated innerHTML throughout the TD, or you can
try using CSS to center the contents.

But try this for innerHTML



var mtstring = "Hello!"

objTbl = document.getElementById("idname")
var objTR = document.createElement ("tr")
var objTD = document.createElement ("td")
var objText = document.createTextNode ("Hello")
objTD.appendChild(objText)

objTR.appendChild(objTD)
objTbl.appendChild(objTR)

objCell = objTbl.childNodes[1].firstChild
var temp = objCell.innerHTML
var space = "   "
var temp = space + temp + space
objCell.innerHTML = temp


It's primitive, but it seems to work OK in Mozilla.

Guardian

You can use the escape sequence '\u' in a string with the Unicode value for a non-breaking space:

var textNode = document.createTextNode("\u00a0");

  and   are strictly HTML (or XML) notations. In JavaScript, you need to use an escape sequence starting with '\\' for special characters in strings. See http://developer.netscape.com/docs/manuals/js/core/jsguide15/ident.html#1008368

thanks BrainJar, but it still doesn't work when inserting Unicode escape sequence for space (\u0020) before and after the text, it only works when inserted in between.
Guardian's solution would be my last resort.

Thanks!

In theory, the DOM1 Core defines a createEntityReference method of the document object.

IE does not include the method, while Gecko has it, but throws an NS_ERROR_DOM_NOT_SUPPORTED_ERR when trying to use it.
Doesn't exist in Opera 6 either.

http://bugzilla.mozilla.org/show_bug.cgi?id=9850
is the most relevant bug I found for Moz's support.

This is one of the few DOM1 methods that it seems no browser implements (and considering Mozilla supports some DOM3, this surprises me).

Guardian's solution would be my last resort.

  I should certainly hope so! As it's far from professional.

 But I would think there would be something you could do with css.
Perhaps by creating a class with wide margins on both sides.

Guardian

In HTML, spaces in text always get compressed. If you had a hundred spaces, or even a million, the browser still displays it as one single space. For example, this in your HTML code:



<span>" text "</span>


displays as this on your page:



" text "


The &amp;nbsp; character (\u00a0) is not the same as the regular space character (\u0020}. Non-breaking spaces will not be compressed by the browser. Each one takes up some space.

So if you want to force some spacing between the edge of a cell and the text, you can add &amp;nbsp; characters to either side of the text. But use \u00a0, not \u0020.

Or, you can also use CSS, setting the padding style on the cell:

objTD.appendChild(objText);
objTD.style.paddingLeft = "1em";
objTD.style.paddingRight = "1em";

which can give you more precise control.

Thanks BrainJar, it now works when I used \u00a0 :thumbsup:










privacy (GDPR)