Ampersand creating problem in IE6 innerHTML property

Kiran Makam · Aug 26, 2008

I am setting the content of a div dynamically using innerHTML
property. If the content contains an ampersand, text after the
ampersand is disappearing in IE6. It works properly in Firefox.

This is my code:
----------------
<body>

<div id='div1'></div>
<script>
var div = document.getElementById('div1');
div.innerHTML = "A&B";
</script>

</body>
---------------

IE6 renders the content of div1 as 'A'
Firefox renders the content properly as 'A&B'

If there is a space after ampersand, IE6 renders it properly. So I
think that IE is assuming anything after ampersand as an HTML entity
( like   ).

Is this a bug in IE6? Is there any workaround for this?

Thanks
Kiran Makam

Martin Honnen · Aug 26, 2008

Kiran said:
div.innerHTML = "A&B";

Is this a bug in IE6? Is there any workaround for this?

No, it is not a bug, the ampersand needs to be escaped as &
(& a m p ; without the blanks) e.g.
div.innerHTML = "A&B"

Thomas 'PointedEars' Lahn · Aug 26, 2008

Kiran said:
I am setting the content of a div dynamically using innerHTML
property. If the content contains an ampersand, text after the
ampersand is disappearing in IE6. It works properly in Firefox.

It works properly in both UAs, because there is no public standard that
defines how syntax errors MUST be handled. The HTML 4.01 Specification only
makes suggestions in that regard:

This is my code:

The DOCTYPE declaration and the required `title' element are missing.

<div id='div1'></div>
<script>

The #REQUIRED `type' attribute is missing.

var div = document.getElementById('div1');

You should do feature tests before you call anything.

div.innerHTML = "A&B";

See below.

</script>

</body>

That is correct.

Firefox renders the content properly as 'A&B'

That is also correct.

If there is a space after ampersand, IE6 renders it properly.

And that is correct as well.

So I think that IE is assuming anything after ampersand as an HTML entity
( like   ).

Which is standards compliant.

Is this a bug in IE6?

No, the bug is in your code.

Is there any workaround for this?

Either

&

or (better) using standards-compliant properties instead of the proprietary
`innerHTML' property.

Validate your code before you complain about browsers next time.

<http://validator.w3.org/>
<http://jibbering.com/faq/>

PointedEars

Bart Van der Donck · Aug 26, 2008

Kiran said:
var div = document.getElementById('div1');
div.innerHTML = "A&B";

The logic is that innerHTML considers the string as HTML; so '&...;'
should represent a valid numeric or character entity reference, while
(the avoidable) innerText considers it as the literal text.

Kiran Makam · Aug 26, 2008

Thanks to all.

Kiran Makam

innerHTML problem in IE6	11	Aug 26, 2008
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
innerHTML	5	Oct 12, 2008
Safari, innerHTML and XHTML	4	Nov 11, 2007
innerHTML with AJAX problem	12	May 9, 2008
setting innerHtml of div tag, changes aren't sticking	3	Mar 8, 2006
innerHTML = JavaScript object	1	Oct 4, 2008
Problem dealing with double quotes in InnerHTML	19	Dec 11, 2007

Ampersand creating problem in IE6 innerHTML property

Kiran Makam

Martin Honnen

Thomas 'PointedEars' Lahn

Bart Van der Donck

Kiran Makam

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads