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.create Element("OPTION ");
// option.appendCh ild(document.cr eateTextNode("& eacute; - example"));
option.innerHTM L = "é - example";

Thanks,
Dan Andrews

[Martin Honnen]

Dan Andrews wrote:

option = document.create Element("OPTION ");
// option.appendCh ild(document.cr eateTextNode("& eacute; - example"));

JavaScript supports string literals with Unicode characters so you can
simply use that character in a string literal e.g.
option.appendCh ild(document.cr eateTextNode('é - example'));
Then there is String.fromChar Code e.g.
document.create TextNode(String .fromCharCode(2 33) + ' - example')
and there are Unicode escape sequences
document.create TextNode('\u00E 9 - example')

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Darko]

On Jun 4, 7:18 pm, Martin Honnen <mahotr...@yaho o.dewrote:

Dan Andrews wrote:

option = document.create Element("OPTION ");
// option.appendCh ild(document.cr eateTextNode("& eacute; - example"));

JavaScript supports string literals with Unicode characters so you can
simply use that character in a string literal e.g.
option.appendCh ild(document.cr eateTextNode('é - example'));
Then there is String.fromChar Code e.g.
document.create TextNode(String .fromCharCode(2 33) + ' - example')
and there are Unicode escape sequences
document.create TextNode('\u00E 9 - example')

--

Martin Honnen
http://JavaScript.FAQTs.com/

Yes, and createTextNode( "&eacute; - ..." ) will create text
"&eacute;" 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.create EntityReference ( "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-Le...0407/core.html

[Dan Andrews]

On Jun 4, 11:18 am, Martin Honnen <mahotr...@yaho o.dewrote:

Dan Andrews wrote:

option = document.create Element("OPTION ");
// option.appendCh ild(document.cr eateTextNode("& eacute; - example"));

JavaScript supports string literals with Unicode characters so you can
simply use that character in a string literal e.g.
option.appendCh ild(document.cr eateTextNode('é - example'));
Then there is String.fromChar Code e.g.
document.create TextNode(String .fromCharCode(2 33) + ' - example')
and there are Unicode escape sequences
document.create TextNode('\u00E 9 - example')

--

Martin Honnen
http://JavaScript.FAQTs.com/

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", "&Ntilde;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.

[snip]
request = new XMLHttpRequest( );
request.open("G ET", "countries?fn=r egions&id=" +
countryTypeIdSe lected, true);
request.onready statechange = function() {
var i;
var array;
var option;
var select = document.getEle mentById("regio n");
var cdata;
if (request.readyS tate == 4) {
array = request.respons eText.split(',' );
if(array.length 1){
for(i=0; i < array.length - 1; i = i + 2){
option =
document.create Element("OPTION ");
option.setAttri bute("value", "" +
array[i]);
if(countryTypeI dSelected && countryTypeIdSe lected
=== array[i]){
option.setAttri bute("selected" , "selected") ;
}
//option.appendCh ild(document.cr eateTextNode("" +
array[i+1]));
option.innerHTM L = "" + array[i+1];
select.appendCh ild(option);
select.disabled = false;
}
}
[snip]

[ASM]

Dan Andrews a écrit :

>
still would like to avoid innerHTML.

[snip]
request = new XMLHttpRequest( );
request.open("G ET", "countries?fn=r egions&id=" +
countryTypeIdSe lected, true);
request.onready statechange = function() {
var i;
var array;
var option;
var select = document.getEle mentById("regio n");
var cdata;
if (request.readyS tate == 4) {
array = request.respons eText.split(',' );
if(array.length 1){
for(i=0; i < array.length - 1; i = i + 2){

option = new Option(array[i+1],array[i]);
if(countryTypeI dSelected &&
countryTypeIdSe lected === array[i])
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.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date