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?

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?

• javascript
• jquery
• dom
• xhtml

• 1 It turned out that the odd behavior I was observing was unrelated. But lhnz is absolutely right about the MIME type. As it turns out, when text/html is used, Firefox strips off unnecessary closing slashes internally, so the generated source shown by Web Developer reflects this. Moral of the story: Serve application/xhtml+xml to browsers that support it, and text/xhtml to the rest. – Trevor Burnham Commented Aug 4, 2009 at 16:16

4 Answers 4

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./pub/a/2003/03/19/dive-into-xml.html

Just a thought.

Try this instead:

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

i created a small test,

code:

$('input.clone').live('click', function(){

    var img = $('<img/>').attr({src : 'http://www.bennadel./resources/uploads/jquery_gradient_example_no_gradient.jpg'});
    $('#target').append(img);

});

html:

<div id="target"> test </div>
<input type="button" class="clone" id="btnClone" value="clone"/>

you can see the small demo here

and here is the full code @ pastebin

try escaping your slash... it's possible that it's not placing it because it is not escaped:

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

also, don't forget if you're writing XHTML that you need to include alt text :)