Question

Image tag (<img src="" alt="" />), line break tags (<br />), or horizontal rule tags (<hr />) have the slashes at the end to indicate itself as self-closing tags. However, when these objects are created by javascript, and I look into the source, they don’t have the slashes, making them invalid by W3C standards.

How can I get over this problem?

(I use javascript Prototype library)

Answer 1

How are you looking at ‘the source’? JavaScript-created elements don’t appear in ‘View Source’. Are you talking about innerHTML?

If so then what you are getting is the web browser’s serialisation of the DOM nodes in the document. In a browser the HTML markup of a page is not the definitive store for document state. The document is stored as a load of Node objects; when these objects are serialised back to markup, that markup may not look much like the original HTML page markup that was parsed to get the document.

So regardless of which of:

<img src="x" alt="y"/>
<img src="x" alt="y">
<img  alt = "y"    src="x">
img= document.createElement('img'); img.src= 'x'; img.alt= 'y';

you use to create an HTMLImageElement node, when you serialise it using innerHTML the browser will typically generate the same HTML markup.

If the browser is in native-XML mode (ie because the page was served as application/xhtml+html), then the innerHTML value certainly will contain self-closing syntax like<img/>. (You might also see other XML stuff like namespaces too, in some browsers.)

However if, as is more likely today, you’re serving ‘HTML-compatible XHTML’ under the media type text/html, the browser isn’t actually using XHTML at all, so you’ll get old-school-HTML when you access innerHTML and you won’t see the self-closing /> form.