Question

Alright y’all. I am attempting to write a bit of code that places typographic glyphs onto an html page. Glyphs like: &amp (ampersand) and &#165 (yen). I am using a simple for loop to create the numbers 160-255 (numbers that associate with a number of glyphs) and prepending “&#”. This i believe creates a string “&#xxx” that is then enclosed in

and added to document.body.

Problem is, all i get is a list of printed strings &#160 – &#255 in the browser. Any thoughts on formatting this differently? I was thinking it could be an encoding error?

var p = null;

// make <p> tags and insert string "&#"+i, where i comes from for loop. //


function makeP(glyphNum){


    var gNum = glyphNum.toString();
    p = document.createElement("p");
    var pGlyph = document.createTextNode("&#"+gNum);
    var string = pGlyph.toString();

    p.appendChild(pGlyph);
    //console.log(p);
    document.body.appendChild(p);


}


//create nums for glyphs//


for(var i = 160;i <= 255; i++)
{

    makeP(i);
}

Answer 1

document.createTextNode does not parse HTML entities. Instead, set the innerHTML property. Note that a numeric HTML entity has to be prefixed by &#, and postfixed by a semicolon (;).

function makeP(glyphNum){
    var p = document.createElement("p");
    p.innerHTML = "&#" + glyphNum + ";";
    document.body.appendChild(p);
}