Results 1 to 5 of 5

Thread: Strange innerHTML Behavior

  1. #1
    Join Date
    Aug 2011

    Strange innerHTML Behavior

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

    <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
    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:

    //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
    Have you looked at the escape and unescape and the encode & decodeURI functions?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Aug 2011
    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;".

    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
    Somewhere behind your screen
    wasn't that simplier to use any other symbol if this one brings headache?
    signature under construction

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