JavaScript:output symbols and special characters

Question

I am trying to include some symbols into a div using JavaScript.
It should look like this:

x ∈ ℝ

, but all I get is: x ∈ ℝ.

var div=document.getElementById("text");
var textnode = document.createTextNode("x ∈ ℝ");					
div.appendChild(textnode); 

<div id="text"></div>

I had tried document.getElementById("something").innerHTML="x ∈ ℝ" and it worked, so I have no clue why createTextNode method did not.

What should I do in order to output the right thing?

Canard

Text node = contains this text. Inner HTML = contains this HTML. One case is explicitly evaluated as HTML, the other is not. – Overrule

Answer 1

You are including HTML escapes ("entities") in what needs to be text. According to the docs for createTextNode:

data is a string containing the data to be put in the text node

That's it. It's the data to be put in the text node. The DOM spec is just as clear:

Creates a Text node given the specified string.

You want to include Unicode in this string. To include Unicode in a JavaScript string, use Unicode escapes, in the format \uXXXX.

var textnode = document.createTextNode("x \u2208 \u211D");

Or, you could simply include the actual Unicode character and avoid all the trouble:

var textnode = document.createTextNode("x ∈ ℝ");

In this case, just make sure that the JS file is served as UTF-8, you are saving the file as UTF-8, etc.

The reason that setting .innerHTML works with HTML entities is that it sets the content as HTML, meaning it interprets it as HTML, in all regards, including markup, special entities, etc. It may be easier to understand this if you consider the difference between the following:

document.createTextNode("<div>foo</div>");
document.createElement("div").textContent = "<div>foo</div";
document.createElement("div").innerHTML = "<div>foo</div>";

The first creates a text node with the literal characters "<div>foo</div>". The second sets the content of the new element literally to "<div>foo</div>". The third, on the other hand, creates an actual div element inside the new element containing the text "foo".

Concise

Answer 2

Every character has a hexadecimal name (for example 0211D). if you want to transform it into a HTML entity, add &#x => ℝ or use the entity name ℝ or the decimal name ℝ which can be found all here: http://www.w3schools.com/charsets/ref_html_entities_4.asp

But when you use JavaScript, in order to make the browser understand that you want to output a unicode symbol and not a string, escape entities are required. To do that, add \u before the hexadecimal name =>\u211D;.

Canard

(1) The semicolon is not part of the hexadecimal code. (2) A unicode symbol is a string (or rather a character in a string). (3) The \uXXXX format is not called an "entity". (4) The leading zero will make this invalid and not give you what you want. It will be interpreted as the unicode code point 0211 followed by the character "d". – Concise

Answer 3

document.createTextNode will automatically html-escape the needed characters. You have to provide those texts as JavaScript strings, either escaped or not:

document.body.appendChild(document.createTextNode("x ∈ ℝ"));
document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createTextNode("x \u2208 \u211d"));

EDIT: It's not true that the createTextNode function will do actual html escaping here as it doesn't need to. @deceze gave a very good explanation about the connection between the dom and html: html is a textual representation of the dom, thus you don't need any html-related escaping when directly manipulating the dom.

Ritch

I don't understand what you mean by "automatically html-escape". It doesn't do anything at all; it just puts the text you gave it, exactly as is, into the text node. – Concise

A web page is not HTML. A web page is a DOM tree. Not everything needs to go through HTML and HTML escaping. HTML is only a textual representation of the initial DOM tree structure. – Overrule

Guys, this is the way to make beginners understand why they don't have to html-escape here. One can't just give a 20 lines long explanation how the dom works as an answer to such a simple question. (although you managed to describe it in two lines, thanks for that) – Ritch

the first example is not recognised by all encoding methods, for example cp1252. – Canard

@Canard Not sure what your point is. Right, you cannot represent a glyph in an encoding in which you cannot represent that glyph. That's a tautology. – Concise

@torazaburo I tried that in Eclipse and when I saved my file, a pop alert appeared and asked me to chose another encoding, so, I am not sure that is the safest way. – Canard

Just choose UTF-8. – Concise

Answer 4

Since ES6, if you want to add special characters to strings you can use template literals. Just use backticks in place of apostrophes to demarcate you string, `x ∈ ℝ` in this case:

var div=document.getElementById("text");
var textnode = document.createTextNode(`x ∈ ℝ`);                    
div.appendChild(textnode); 

<div id="text"></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Viewer