JavaScript gets rid of trailing slash in <img /> tag

Question

I have the following JS code:

validateConfigName.html('<img src="/rta/images/check-24.png" />');

But when it executes in Firefox I see this as the generated code:

<img src="/rta/images/check-24.png">

Why?

Answer 1

In HTML the <img> tag is supposed to be <img>, in XHTML it'll be <img />...so depending on what DOCTYPE your page is using, this will vary.

From the HTML 4.0 Spec for <img>:

Start tag: required, End tag: forbidden

In XHTML elements must be closed:

Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest properly.

Answer 2

It's the way, the browser renders your html code according to the doctype used.

Nothing to worry about though..

Answer 3

Generated code, as in, like Firebug or something? Firebug operates on the DOM and not actual source code which means that it may not look exactly the same as the code you entered. It shouldn't really make a difference, though.

Answer 4

It's because you're not serving XHTML, even if your DOCTYPE is an XHTML doctype. An XHTML document isn't treated as XHTML unless you either serve it as application/xhtml+xml, application/xml, or text/xml using the Content-Type HTTP header.