Estoy usando Firefox 3.5. Mi doctype es XHTML 1.0 Strict. Digamos que quiero insertar una imagen en un div con id "foo"; entonces podría intentar:XHTML DOM manipulación con jQuery
var foo = $('#foo');
foo.html('<img src="bar.gif" />');
Esto de hecho agrega la imagen. Pero noté que esto estaba causando un comportamiento extraño más adelante en el documento, que sospeché podría deberse a la ruptura de XHTML. Efectivamente, el uso de la herramienta de desarrollador web para Firefox, he comprobado la fuente generado y se horrorizó al ver que después de la escritura funciona, tengo:
<div id="foo"><img src="bar.gif"></div>
Donde hizo la barra al final de la etiqueta img ir !? Buscar alrededor, he encontrado que esto no es un problema específico de jQuery: El código JavaScript puro
document.getElementById('foo').innerHTML = '<img src="bar.gif" />';
produce los mismos resultados. ¿Entonces qué debo hacer? Debo señalar que usar el formulario expandido
<img src="bar.gif"></img>
no afecta el resultado. ¿Cómo inserto XHTML estrictamente válido en mi documento con JavaScript?
Resultó que el extraño comportamiento que estaba observando no estaba relacionado. Pero lhnz tiene toda la razón sobre el tipo MIME. Al final, cuando se usa text/html, Firefox elimina las barras de cierre innecesarias internamente, por lo que la fuente generada que muestra Web Developer refleja esto. Moraleja de la historia: sirva application/xhtml + xml a los navegadores que lo soporten, y text/xhtml al resto. –