innerHTML and <br>

[Lorenzo Bettini]

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

 

[Martin Honnen]

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.

 

[Randy Webb]

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.

 

[Lorenzo Bettini]

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

 

[Martin Honnen]

Martin Honnen wrote:

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.

 

[VK]

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.

 

[Lorenzo Bettini]

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

 

[Roy A.]

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.