Question

I am wondering my IE6 and IE7 is messing up dynamic HTML generated by JavaScript (use with FancyBox and jQuery).

For example:

var html = '<a href="#fancyBoxContent" class="fancybox"></a>';
document.getElementById('container').innerHTML = html;

Instead of filling the container with ‘<a href="#fancyBoxContent" class="fancybox"></a>‘, it becomes ‘<a href="http://website.com/#fancyBoxContent" class="fancybox"></a>’.

Any type of HTML/CSS which is valid, but IE6 and IE7 considers ‘odd’ gets all messed up. I could create HTML with DOM elements, but while this example is simple, it would mean my more complex code will result in javascript which is many times more complex and long. Also, cross compat becomes a issue as well as not always being able to control the exact synax of the HTML code being generated. Hence why I create dynamic HTML using javascript in this manner, DOM elements and builders break a lot of the valid HTML/CSS I try to generate.

Any ways around this?

Answer 1

There’s no way that I am aware of around this particular issue. It shouldn’t cause any problems, though. Behavioral wise, http://website.com/foo#fancyBoxContent and #fancyBoxContent is the same, given the URL of the current page is http://website.com/foo.