aaa<br /> gets turned into aaa<BR> with innerHTML

Discussion in 'Javascript' started by yawnmoth, Apr 21, 2009.

  1. yawnmoth

    yawnmoth Guest

    <div id="demo">aaa<br /></div>

    <script>
    alert(document.getElementById('demo').innerHTML);
    </script>

    Why, in Firefox, does that return "aaa<br>"? And why, in Opera, does
    that return "aaa<BR>"? Why isn't it returning the exact HTML as
    opposed to some strange sort of internally modified version?
     
    yawnmoth, Apr 21, 2009
    #1
    1. Advertising

  2. yawnmoth wrote:
    > <div id="demo">aaa<br /></div>
    >
    > <script>
    > alert(document.getElementById('demo').innerHTML);
    > </script>
    >
    > Why, in Firefox, does that return "aaa<br>"? And why, in Opera, does
    > that return "aaa<BR>"? Why isn't it returning the exact HTML as
    > opposed to some strange sort of internally modified version?


    Well the browser does not store the source, it builds a DOM tree with
    nodes and serializes as needed when you access innerHTML.
    How would you expect innerHTML to give you any result for dynamically
    created elements if it simply returned the source text?

    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
     
    Martin Honnen, Apr 21, 2009
    #2
    1. Advertising

  3. yawnmoth

    yawnmoth Guest

    On Apr 21, 11:55 am, Martin Honnen <> wrote:
    > yawnmoth wrote:
    > > <div id="demo">aaa<br /></div>

    >
    > > <script>
    > > alert(document.getElementById('demo').innerHTML);
    > > </script>

    >
    > > Why, in Firefox, does that return "aaa<br>"?  And why, in Opera, does
    > > that return "aaa<BR>"?  Why isn't it returning the exact HTML as
    > > opposed to some strange sort of internally modified version?

    >
    > Well the browser does not store the source, it builds a DOM tree with
    > nodes and serializes as needed when you access innerHTML.
    > How would you expect innerHTML to give you any result for dynamically
    > created elements if it simply returned the source text?


    Hmmmm - good point.
     
    yawnmoth, Apr 21, 2009
    #3
  4. yawnmoth

    Luuk Guest

    yawnmoth schreef:
    > <div id="demo">aaa<br /></div>
    >
    > <script>
    > alert(document.getElementById('demo').innerHTML);
    > </script>
    >
    > Why, in Firefox, does that return "aaa<br>"? And why, in Opera, does
    > that return "aaa<BR>"? Why isn't it returning the exact HTML as
    > opposed to some strange sort of internally modified version?


    IE8 also returns "aaa<BR>" (just in case someone wanted to know.... ;-)

    --
    Luuk
     
    Luuk, Apr 21, 2009
    #4
  5. yawnmoth

    RobG Guest

    On Apr 22, 3:14 am, yawnmoth <> wrote:
    > On Apr 21, 11:55 am, Martin Honnen <> wrote:
    >
    > > yawnmoth wrote:
    > > > <div id="demo">aaa<br /></div>

    >
    > > > <script>
    > > > alert(document.getElementById('demo').innerHTML);
    > > > </script>

    >
    > > > Why, in Firefox, does that return "aaa<br>"?  And why, in Opera, does
    > > > that return "aaa<BR>"?  Why isn't it returning the exact HTML as
    > > > opposed to some strange sort of internally modified version?

    >
    > > Well the browser does not store the source, it builds a DOM tree with
    > > nodes and serializes as needed when you access innerHTML.
    > > How would you expect innerHTML to give you any result for dynamically
    > > created elements if it simply returned the source text?

    >
    > Hmmmm - good point.


    Also, browsers do quite a bit of error correction where necessary, the
    (non-standard but widely supported) innerHTML property represents what
    the browser made of the source.

    Note that the innerHTML property has not been standardised, so while
    it is reasonably consistent for most elements, there are various
    foibles between browsers. Do not depend on it to return consistent
    HTML for a document fragment, particularly in regard to attributes,
    e.g.:

    var div = document.createElement('div');
    var inp = document.createElement('input');
    inp.value = 'foo';
    div.appendChild(inp);
    alert(div.innerHTML);

    IE shows "<INPUT value=foo>"
    Firefox shows "<input>"


    --
    Rob
     
    RobG, Apr 22, 2009
    #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. Guest
    Replies:
    5
    Views:
    374
    Guest
    Mar 15, 2005
  2. Stefan Mueller
    Replies:
    5
    Views:
    526
    Steven Saunderson
    Jul 10, 2006
  3. Lord Merlin
    Replies:
    0
    Views:
    624
    Lord Merlin
    Apr 11, 2004
  4. sonic
    Replies:
    5
    Views:
    293
    Randy Webb
    Jul 11, 2006
  5. fulio pen
    Replies:
    6
    Views:
    99
Loading...

Share This Page