createTextNode/innerHTML and special character handling

Discussion in 'Javascript' started by Dan Andrews, Jun 4, 2007.

  1. Dan Andrews

    Dan Andrews Guest

    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
     
    Dan Andrews, Jun 4, 2007
    #1
    1. Advertising

  2. Dan Andrews wrote:

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

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 4, 2007
    #2
    1. Advertising

  3. Dan Andrews

    Darko Guest

    On Jun 4, 7:18 pm, Martin Honnen <> wrote:
    > Dan Andrews wrote:
    > > option = document.createElement("OPTION");
    > > // option.appendChild(document.createTextNode("&eacute; - 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')
    >
    > --
    >
    > 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.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
     
    Darko, Jun 4, 2007
    #3
  4. Dan Andrews

    Dan Andrews Guest

    On Jun 4, 11:18 am, Martin Honnen <> wrote:
    > Dan Andrews wrote:
    > > option = document.createElement("OPTION");
    > > // option.appendChild(document.createTextNode("&eacute; - 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')
    >
    > --
    >
    > 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 安, 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]
     
    Dan Andrews, Jun 4, 2007
    #4
  5. Dan Andrews

    ASM Guest

    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.

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Jun 5, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Avi U
    Replies:
    2
    Views:
    603
    Martin Honnen
    Jan 13, 2004
  2. Danny
    Replies:
    11
    Views:
    882
  3. Martin Honnen

    Re: DOM CreateTextNode with Unicode

    Martin Honnen, Feb 29, 2008, in forum: XML
    Replies:
    0
    Views:
    404
    Martin Honnen
    Feb 29, 2008
  4. sonic
    Replies:
    5
    Views:
    316
    Randy Webb
    Jul 11, 2006
  5. Randy Webb

    createTextNode and IE7

    Randy Webb, Nov 30, 2006, in forum: Javascript
    Replies:
    50
    Views:
    809
    Randy Webb
    Dec 19, 2006
Loading...

Share This Page