XHTML DOM manipulation with jQuery

Question

I'm using Firefox 3.5. My doctype is XHTML 1.0 Strict. Let's say I want to insert an image into a div with id "foo"; then I might try:

var foo = $('#foo');
foo.html('<img src="bar.gif" />');

This does indeed add the image. But I noticed that this was causing some odd behavior later in the document, which I suspected might be due to XHTML breaking. Sure enough, using the Web Developer tool for Firefox, I checked the generated source and was horrified to find that after the script runs, I have:

<div id="foo"><img src="bar.gif"></div>

Where did the trailing slash on the img tag go!? Searching around, I found that this isn't a jQuery-specific problem: The pure JavaScript code

document.getElementById('foo').innerHTML = '<img src="bar.gif" />';

produces the same results. So, what should I do? I should note that using the expanded form

<img src="bar.gif"></img>

does not affect the result. How do I insert strictly valid XHTML into my document with JavaScript?

Answer 1

This is a little bit of a shot in the dark, and I am not sure whether this could be the cause, but are you sure that you are serving XHTML and not just standard HTML with XHTMLs syntax. That is: is the MIME type of the document the default text/html or is it application/xhtml+xml?

I read the following article recently, and the problem you are having would make perfect sense to me if the document wasn't actually being treated as XML by the browser (and therefore it was removing the erroneous XHTML style slashes for not conforming to the MIME type)...

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Just a thought.

Answer 2

Try this instead:

var image = document.createElement('img');
image.setAttribute('src', 'bar.gif');
foo.appendChild(image);