document.createTextNode and entities

Projects and Code254 words2 minutes to read

One problem that I’ve had when working with dynamic DOM nodes is the inability to use entities with document.createTextElement(). I’ve read suggestions about using utf–16/ucs–2 values, but how do you find them and how do you convert them? This led me on a journey to figure out how to handle this. I ended up digging through some TinyMCE source code, and found a gem of a function that I then added a ‘stupefy’ mode to. Here’s the code:

function entity(str, mode) {
    var str = (str) ? str : '';
    var mode = (mode) ? mode : 'string';

    var e = document.createElement("div");
    e.innerHTML = str;

    if (mode === 'numeric') {
        return '&#' + e.innerHTML.charCodeAt(0) + ';';
    } else if (mode === 'utf16') {
        var un = e.innerHTML.charCodeAt(0).toString(16);

        while (un.length < 4) {
            un = "0" + un;

        return "\\u" + un;

    return e.innerHTML;

entity() has two parameters:

  1. entity: is a string which can be either a named entity (») or a numeric entity (&#187;)
  2. mode: is an optional value that accepts ‘numeric’, ‘utf16’, or ‘string’. Defaults to ‘string’.

You’d use it like this:

// Normal mode
var div = document.createElement('div');
var text = document.createTextNode('Parent ' + entity('»') + ' Child');

// Stupefy mode
var num = "The numeric entity for » is " + entity('»', 'numeric');
var utf = "The UTF-16 entity for » is " + entity('»', 'utf16');

I hope this can help other people out there who’ve run into the same problem as many times as I have!

Ryan Parman

Ryan Parman is an experienced Software/DevOps/Security engineer, currently living in Seattle. He is the creator of and , patented multifactor-authentication-as-a-service at , and came up with the idea of “serverless, event-driven, responsive functions in the cloud” while at AWS in 2010. Ryan's aptly-named blog, , is where he writes about ideas longer than . Ambivert. Curious. Not a coffee drinker.