www.webdeveloper.com
Results 1 to 5 of 5

Thread: Strange innerHTML Behavior

Hybrid View

  1. #1
    Join Date
    Aug 2011
    Posts
    3

    Strange innerHTML Behavior

    I used the code below as an experiment (in IE7):

    Code:
    <div id="testdiv">xViantU&CInpatient</div>
    <div id="testdiv2">xViantU&COutpatient</div>
    
    <input type="button" value="click" onClick="testdiv.innerHTML='xViantU&CInpatient'; testdiv2.innerHTML='xViantU&COutpatient'; alert(testdiv.innerHTML); alert(testdiv2.innerHTML)">
    When the button is clicked, the text of testdiv2 doesn't change on the browser, but the text of testdiv changes to "xViantU". And, the alerts come back as "xViantU" and "xViantU&ampCOutpatient", respectively.

    I don't understand why the "&" gets converted to "&amp" for the 2nd, but not for the 1st. Any light shed on this is appreciated -- thanks.

  2. #2
    Join Date
    Aug 2011
    Posts
    3
    After some experimentation, I've discovered what's going on. It appears to be a JS behavior that's specific to IE (IE8, and possibility previous versions).

    If you have a string that contains an ampersand, and you assign that string to the value of an element's innerHTML, JS will automatically convert the "&" to "&amp;" in the new innerHTML value. BUT, it will do this ONLY if the ampersand in the string is followed by at least 11 characters. Any less than 11, it will not, and will likely truncate the ampersand and everything that came after it (unless the ampersand is already being used in a character code.)

    See code below:

    Code:
    //less than 11 chars after ampersand
    myString = "foo&bar";
    myDiv.innerHTML = myString;
    //alert(myString) will show "foo&bar"
    //alert(myDiv.innerHTML) will show "foo"
    
    //at least 11 chars after ampersand
    myString = "foo&barbecueRibs"
    myDiv.innerHTML = myString;
    //alert(myString) will show "foo&barbecueRibs"
    //alert(myDiv.innerHTML) will show "foo&amp;barbecueRibs"
    Not sure why IE8 behaves this way. In Firefox, the number of chars following the ampersand doesn't matter; JS in FF will convert "&" to "&amp;", regardless. (Again, as long as the ampersand isn't being used in a character code).

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Have you looked at the escape and unescape and the encode & decodeURI functions?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Aug 2011
    Posts
    3
    Quote Originally Posted by \\.\ View Post
    Have you looked at the escape and unescape and the encode & decodeURI functions?
    Yes - looked at all 4 before posting here:

    escape() - is url-safe but not html-safe. escape("foo&bar") = foo%26bar. Function is also deprecated.
    unescape() - No effect, and is also deprecated.
    encodeURI() - Doesn't handle special characters like "&" -- for that you need to use encodeURIComponent().
    encodeURIComponent() - Same problem as escape() -- url-safe but not html-safe.
    decodeURIComponent() - no effect.

    There's no function native to JS that does what I need done, so I just ended up using the replace() function, since I know the beginning string will always have "&" as and not "&amp;".

    Code:
    var strProduct = xmlResult.childNodes[i].getAttribute("strProduct");
    strProduct = strProduct.replace("&", "&amp;");
    objProduct.innerHTML = strProduct;//"&amp;" remains as "&amp;" when assigned to innerHTML

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    wasn't that simplier to use any other symbol if this one brings headache?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles