createTextNode/innerHTML and special character handling

createTextNode/innerHTML and special character handling

Post by Dan Andrew » Wed, 06 Jun 2007 02:09:55


I was wondering what is the correct way to handle special characters
via javascript and the DOM. I would like to avoid document.write and
innerHTML. What I am doing is dynamically creating options for a
select. The innerHTML example below works for firefox and internet
explorer, but is this the accepted way of dynamically adding special

option = document.createElement("OPTION");
// option.appendChild(document.createTextNode("é - example"));
option.innerHTML = "é - example";

Dan Andrews

createTextNode/innerHTML and special character handling

Post by Martin Hon » Wed, 06 Jun 2007 02:18:53

JavaScript supports string literals with Unicode characters so you can
simply use that character in a string literal e.g.
option.appendChild(document.createTextNode('- example'));
Then there is String.fromCharCode e.g.
document.createTextNode(String.fromCharCode(233) + ' - example')
and there are Unicode escape sequences
document.createTextNode('\u00E9 - example')


Martin Honnen


createTextNode/innerHTML and special character handling

Post by Dark » Wed, 06 Jun 2007 02:28:11

Yes, and createTextNode( "é - ..." ) will create text
"é" visible in the option (which you didn't want, for granted).
What you don't see difference between are the regular text fragments
and xml entities - entities are elements in xml which are recognized
by the famous "&" and ";" delimiters. What you should do is find the
javascript function that can make entities e.g.
document.crea *** tityReference( "eacute" ), but this I had problems
with - got exceptions etc. in some previous work, so I stuck with the
innerHTML property. I think you have to declare the entity first, then
get this reference etc. Anyway, if you get any idea how this works -
share it with us ;-)

Take a look at this, it probably contains the needed information
*somewhere* inside, but I don't have much time at the moment to read
all of it. Good luck:

createTextNode/innerHTML and special character handling

Post by Dan Andrew » Wed, 06 Jun 2007 03:40:51

Thanks this is very good to know, however, I don't quite have
literals. I have both entity references and some unicode ("Anhui
\u5b89\u5fbd", "Ñuble",...) in my real situation. The text is
actually coming from a database via an XMLHttpRequest object and the
responseText. I believe these literals are interpreted a bit
differently when they are hard coded as in your '\u00E9 - example'
versus when they are sent across the wire in an XMLHttpRequest, or is
there a way to specify the characterset in an XMLHttpRequest. The
innerHTML is working well if I convert \u5b89 to &#xu5b89;, but I
still would like to avoid innerHTML.

request = new XMLHttpRequest();"GET", "countries?fn=regions&id=" +
countryTypeIdSelected, true);
request.onreadystatechange = function() {
var i;
var array;
var option;
var select = document.getElementById("region");
var cdata;
if (request.readyState == 4) {
array = request.responseText.split(',');
if(array.length>> 1){
for(i=0; i<< array.length - 1; i = i + 2){
option =
option.setAttribute("value", "" +
if(countryTypeIdSelected && countryTypeIdSelected
=== array[i]){
option.setAttribute("selected", "selected");
//option.appendChild(document.createTextNode("" +
option.innerHTML = "" + array[i+1];
select.disabled = false;

createTextNode/innerHTML and special character handling

Post by ASM » Wed, 06 Jun 2007 08:09:07

Dan Andrews a rit :

option = new Option(array[i+1],array[i]);
if(countryTypeIdSelected &&
countryTypeIdSelected === array[i])
option.selected = true;
select.options[select.length] = option;
select.disabled = false;

It is not because you use XMLHttpRequest that old and eficient JS is dead.

Stephane Moriaux et son (moins) vieux Mac ddass Stephane Moriaux and his (less) old Mac already out of date