In Javascript, how to avoid the "escaping" in createTextElement method?

Question

Here is the Jsfiddle demo

document.getElementById("container").appendChild(document.createTextNode(' '))

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="container" class="material-icons"></div>
<br>
<div class="material-icons">&#xe145;</div>

I have two <div> node.

 is the actual character code for "plus sign" in the font.

However, the one which is appended  by Javascript doesn't work.

It seems that  is escaped by createTextNode or appendChild...

Does anyone have ideas about how to avoid the escaping..

Answer 1

When you create a text node, you're skipping the HTML parse step that would recognize entity notation and produce the corresponding content.

You can use a JavaScript escape sequence however:

document.getElementById("container").appendChild(document.createTextNode('\ue145'))

The string in the JavaScript code is parsed, but it's parsed according to the rules of JavaScript syntax, not HTML syntax.

Answer 2

 is an html entity in hex

Try utilizing .innerHTML

var elem = document.getElementById("container");
elem.innerHTML = "";

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="container" class="material-icons"></div>
<br>
<div class="material-icons">&#xe145;</div>