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

[yawnmoth]

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

 

[Martin Honnen]

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

 

[yawnmoth]

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.

 

[Luuk]

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.... ;-)

 

[RobG]

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