createTextNode/innerHTML and special character handling

[Dan Andrews]

Hello,

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
characters.

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

Thanks,
Dan Andrews

 

[Martin Honnen]

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

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')

 

[Darko]

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')

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.createEntityReference( "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:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

 

[Dan Andrews]

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')

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 安, but I
still would like to avoid innerHTML.

[snip]
request = new XMLHttpRequest();
request.open("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 =
document.createElement("OPTION");
option.setAttribute("value", "" +
array);
if(countryTypeIdSelected && countryTypeIdSelected
=== array){
option.setAttribute("selected", "selected");
}
//option.appendChild(document.createTextNode("" +
array[i+1]));
option.innerHTML = "" + array[i+1];
select.appendChild(option);
select.disabled = false;
}
}
[snip]

 

[ASM]

Dan Andrews a écrit :

still would like to avoid innerHTML.

[snip]
request = new XMLHttpRequest();
request.open("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 = new Option(array[i+1],array);
if(countryTypeIdSelected &&
countryTypeIdSelected === array)
option.selected = true;
select.options[select.length] = option;
}
select.disabled = false;
}

}
[snip]

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