innerHTML removing closing slash from image tag

Question

This is very odd. Here is a quick test function:

function test_function(){
    code = '<img src="http://www.myimage.com/img.jpg" alt="image" />';
    alert(code);
    document.getElementById('test').innerHTML = code;
    alert(document.getElementById('test').innerHTML);
}

Running the code above will show /> in the first alert, but the second alert doesn't, it shows just >. So it looks like applying to .innerHTML strips out the forward slash. Any ideas how to stop this from happening? I need the forward slash for validation.

Answer 1

The second alert just shows you what the browser uses as its internal representation of your image element. You don't need the slash for validation, as validation always is about your page's source, validators don't execute JavaScript that dynamically adds elements to the DOM.

In fact, most browsers handle XHTML internally just the same as HTML, not as an XML-representation of your document. Only when you send your XHTML document with MIME-type application/xhtml+xml, some browsers will render your page using the XML parser.

Also see Ian Hickson's article.