innerHTML and <br>

Discussion in 'Javascript' started by Lorenzo Bettini, Feb 7, 2007.

  1. Hi

    on the same page I set the innerHTML property of an element to something
    like

    my_string + "<br />"

    then when I try to remove my_string + "<br />" from the innerHTML it
    fails since the "<br />" is not found.

    after some debugging I found out that the innerHTML actually contains:

    my_string + "<br>"

    This happens in Firefox... in Konqueror it's even different:

    my_string + "<BR>"

    is this the expected behavior (i.e., browser dependent)... is there a
    way to find out how <br> is actually stored into an innerHTML?

    Or is what I'm trying to do a design error?

    thanks in advance
    Lorenzo

    --
    Lorenzo Bettini, PhD in Computer Science, DSI, Univ. di Firenze
    ICQ# lbetto, 16080134 (GNU/Linux User # 158233)
    HOME: http://www.lorenzobettini.it MUSIC: http://www.purplesucker.com
    BLOGS: http://tronprog.blogspot.com http://longlivemusic.blogspot.com
    http://www.gnu.org/software/src-highlite
    http://www.gnu.org/software/gengetopt
    http://www.gnu.org/software/gengen http://doublecpp.sourceforge.net
     
    Lorenzo Bettini, Feb 7, 2007
    #1
    1. Advertising

  2. Lorenzo Bettini wrote:

    > then when I try to remove my_string + "<br />" from the innerHTML it
    > fails since the "<br />" is not found.
    >
    > after some debugging I found out that the innerHTML actually contains:
    >
    > my_string + "<br>"
    >
    > This happens in Firefox... in Konqueror it's even different:
    >
    > my_string + "<BR>"
    >
    > is this the expected behavior (i.e., browser dependent)... is there a
    > way to find out how <br> is actually stored into an innerHTML?


    The browser, when you set innerHTML, parses your snippet of markup into
    nodes, when you read innerHTML, it serializes the nodes to a snippet of
    markup.
    If you want to know whether your element contains a br element then use e.g.
    element.getElementsByTagName('br').length > 0
    where element is the element you originally checked the innerHTML on.





    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Feb 7, 2007
    #2
    1. Advertising

  3. Lorenzo Bettini

    Randy Webb Guest

    Lorenzo Bettini said the following on 2/7/2007 8:14 AM:
    > Hi
    >
    > on the same page I set the innerHTML property of an element to something
    > like
    >
    > my_string + "<br />"


    Don't try to insert XHTML with innerHTML, it doesn't work.

    > then when I try to remove my_string + "<br />" from the innerHTML it
    > fails since the "<br />" is not found.
    >
    > after some debugging I found out that the innerHTML actually contains:
    >
    > my_string + "<br>"


    That's because the browser normalized the XHTML tag to HTML.

    > This happens in Firefox... in Konqueror it's even different:
    >
    > my_string + "<BR>"


    Only the case is different. The tag is the same.

    > is this the expected behavior (i.e., browser dependent)... is there a
    > way to find out how <br> is actually stored into an innerHTML?


    Use toLowerCase on your string then it is all lowercase.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Feb 7, 2007
    #3
  4. Martin Honnen wrote:
    > Lorenzo Bettini wrote:
    >
    >> then when I try to remove my_string + "<br />" from the innerHTML it
    >> fails since the "<br />" is not found.
    >>
    >> after some debugging I found out that the innerHTML actually contains:
    >>
    >> my_string + "<br>"
    >>
    >> This happens in Firefox... in Konqueror it's even different:
    >>
    >> my_string + "<BR>"
    >>
    >> is this the expected behavior (i.e., browser dependent)... is there a
    >> way to find out how <br> is actually stored into an innerHTML?

    >
    > The browser, when you set innerHTML, parses your snippet of markup into
    > nodes, when you read innerHTML, it serializes the nodes to a snippet of
    > markup.
    > If you want to know whether your element contains a br element then use
    > e.g.
    > element.getElementsByTagName('br').length > 0
    > where element is the element you originally checked the innerHTML on.


    but this actually returns 1, while I should know the actual contents of
    that element (i.e., <br> or <BR>)

    --
    Lorenzo Bettini, PhD in Computer Science, DSI, Univ. di Firenze
    ICQ# lbetto, 16080134 (GNU/Linux User # 158233)
    HOME: http://www.lorenzobettini.it MUSIC: http://www.purplesucker.com
    BLOGS: http://tronprog.blogspot.com http://longlivemusic.blogspot.com
    http://www.gnu.org/software/src-highlite
    http://www.gnu.org/software/gengetopt
    http://www.gnu.org/software/gengen http://doublecpp.sourceforge.net
     
    Lorenzo Bettini, Feb 7, 2007
    #4
  5. Lorenzo Bettini wrote:
    > Martin Honnen wrote:


    >> If you want to know whether your element contains a br element then
    >> use e.g.
    >> element.getElementsByTagName('br').length > 0
    >> where element is the element you originally checked the innerHTML on.

    >
    > but this actually returns 1, while I should know the actual contents of
    > that element (i.e., <br> or <BR>)


    br is an _empty_ element, it does not have contents. The tag name of
    elements in a HTML document is being normalized so while your markup
    might use <br> or <Br> or <bR> or <BR> the DOM will contain a normalized
    form (e.g. BR or br). There is no way to find the original markup in the
    DOM, unless you use XHTML and serve it as application/xhtml+xml so that
    the browser uses its XML parser.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Feb 7, 2007
    #5
  6. Lorenzo Bettini

    VK Guest

    > I should know the actual contents of
    > that element (i.e., <br> or <BR>)


    In HTML there is not such thing as "actual content", so you cannot get
    something that doesn't exist. ;-)
    HTML source served from the server - or from local file - is not what
    you see on the screen. The original HTML source is only a "guideline"
    for the UA parser. The visual or aural representation in any UA is the
    result of i) normalization and ii) error correction of the original
    source. Respectively the resulting DOM Tree may be very far from what
    you could expect from the original source - and it never identical to
    the said source.

    This way if for your project is important to know if normalized node
    contains <br> or <BR> or <br /> then you are doing something against
    the WWW nature.

    You may query for two things:
    1) Original HTML source fragment used as the basis for the given DOM
    Tree node. For that you may use XHR and its responseText. I want to
    stress once again that there is no equality of any kind between the
    source and the resulted DOM Tree on a particular UA. This way the
    practicality of such query would be limited by studies of
    normalization and error correction mechanics of that particular UA.
    2) Internal HTML code associated with the given DOM node. innerHTML,
    getAttribute, nodeValue etc. may be used for that. Because such
    internal code is the result of normalization and error correction of a
    particular UA, you cannot make any theoretical predictions about the
    reported form. You only can study normalization and error correction
    per UAs and then make some educated guesses based on run-time UA
    sniffing.

    P.S. Such UAs' behavior is by design.

    P.P.S. With proper project approach it has no practical impact because
    in your script you are dealing with DOM Tree and not with textual
    sources. So it should bother you no more than say the internal byte
    order on your machine when you are using a calculator applet.
     
    VK, Feb 7, 2007
    #6
  7. VK wrote:
    >> I should know the actual contents of
    >> that element (i.e., <br> or <BR>)

    >
    > In HTML there is not such thing as "actual content", so you cannot get
    > something that doesn't exist. ;-)
    > HTML source served from the server - or from local file - is not what
    > you see on the screen. The original HTML source is only a "guideline"
    > for the UA parser. The visual or aural representation in any UA is the
    > result of i) normalization and ii) error correction of the original
    > source. Respectively the resulting DOM Tree may be very far from what
    > you could expect from the original source - and it never identical to
    > the said source.
    >
    > This way if for your project is important to know if normalized node
    > contains <br> or <BR> or <br /> then you are doing something against
    > the WWW nature.
    >
    > You may query for two things:
    > 1) Original HTML source fragment used as the basis for the given DOM
    > Tree node. For that you may use XHR and its responseText. I want to
    > stress once again that there is no equality of any kind between the
    > source and the resulted DOM Tree on a particular UA. This way the
    > practicality of such query would be limited by studies of
    > normalization and error correction mechanics of that particular UA.
    > 2) Internal HTML code associated with the given DOM node. innerHTML,
    > getAttribute, nodeValue etc. may be used for that. Because such
    > internal code is the result of normalization and error correction of a
    > particular UA, you cannot make any theoretical predictions about the
    > reported form. You only can study normalization and error correction
    > per UAs and then make some educated guesses based on run-time UA
    > sniffing.
    >


    Basically what I'm doing is the following, append an error string to the
    innerHTML of an element with a final <br> character, and then I need to
    be able to remove that error string (together with the <br>); now I'm
    using this solution (that considers both <br> and <BR>):

    // this function adds an error at the end of a possible previous
    // error message
    function addError(elementId, error, isErrorOrMsg)
    {
    // find the HTML element that displays the error
    var message = document.getElementById(elementId + (isErrorOrMsg ? "Err"
    : "Msg"));

    if (message.innerHTML == '' || message.innerHTML.indexOf(error) == -1) {
    // OK this error is not already shown, so add it and show the error
    message.className = (isErrorOrMsg ? "error" : "msg");
    message.innerHTML += error + '<br>';
    // the error is appended to the possible current one
    }
    // otherwise this error is already shown
    }

    // this function removes an error from a possible previous
    // error message. Then, if the error message is empty, also makes it hidden
    function removeError(elementId, error, isErrorOrMsg)
    {
    // find the HTML element that displays the error
    var message = document.getElementById(elementId + (isErrorOrMsg ? "Err"
    : "Msg"));

    // some browsers might change the case of <br>, e.g., Firefox
    var toreplace = error + "<br>";
    if (message.innerHTML.indexOf(toreplace) == -1) {
    toreplace = error + "<BR>";
    }

    message.innerHTML = message.innerHTML.replace(toreplace, "");

    if (message.innerHTML == '') {
    // OK this error empty so we hide it
    message.className = "hidden";
    }
    }

    but, from what I understand, this design is flaw from the start right?

    thanks in advance
    Lorenzo

    --
    Lorenzo Bettini, PhD in Computer Science, DSI, Univ. di Firenze
    ICQ# lbetto, 16080134 (GNU/Linux User # 158233)
    HOME: http://www.lorenzobettini.it MUSIC: http://www.purplesucker.com
    BLOGS: http://tronprog.blogspot.com http://longlivemusic.blogspot.com
    http://www.gnu.org/software/src-highlite
    http://www.gnu.org/software/gengetopt
    http://www.gnu.org/software/gengen http://doublecpp.sourceforge.net
     
    Lorenzo Bettini, Feb 7, 2007
    #7
  8. Lorenzo Bettini

    Roy A. Guest

    On 7 Feb, 14:14, Lorenzo Bettini <> wrote:
    > Hi
    >
    > on the same page I set the innerHTML property of an element to something
    > like
    >
    > my_string + "<br />"
    >
    > then when I try to remove my_string + "<br />" from the innerHTML it
    > fails since the "<br />" is not found.
    >
    > after some debugging I found out that the innerHTML actually contains:
    >
    > my_string + "<br>"
    >
    > This happens in Firefox... in Konqueror it's even different:
    >
    > my_string + "<BR>"
    >
    > is this the expected behavior (i.e., browser dependent)... is there a
    > way to find out how <br> is actually stored into an innerHTML?


    There isn't any public standard that applies to this property.
     
    Roy A., Feb 8, 2007
    #8
    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. Frédéric Mayot

    Custom controls and innerHTML

    Frédéric Mayot, Jul 21, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    499
    MattC
    Jul 21, 2004
  2. Hanoi
    Replies:
    1
    Views:
    1,131
    Neredbojias
    Aug 1, 2007
  3. jbonifacejr
    Replies:
    4
    Views:
    3,287
    Neredbojias
    Feb 5, 2008
  4. nick

    innerHTML and images loading

    nick, Sep 20, 2003, in forum: Javascript
    Replies:
    1
    Views:
    102
  5. sonic
    Replies:
    5
    Views:
    296
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page