XHTML DOM manipulación con jQuery

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?

Fuente

2009-08-03 Trevor Burnham

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. –

Esto es un poco de un tiro en la oscuridad, y no estoy seguro de si esto podría ser la causa, pero ¿está seguro de que están sirviendo a XHTML y no HTML acaba de serie con la sintaxis XHTMLs. Es decir: ¿el tipo MIME del documento es el texto predeterminado/html o es application/xhtml + xml?

He leído el siguiente artículo recientemente, y el problema que está teniendo tendría mucho sentido para mí si el navegador no estaba tratando realmente el documento (y por lo tanto estaba eliminando las barras de estilo XHTML erróneas para no conforme con el tipo MIME) ...

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Es sólo una idea.

Fuente

2009-08-03 23:49:00 olive

¡Muy bien! Pensé que estaba sirviendo mi página como application/xhtml + xml, pero en realidad solo era text/html. Al hacer el cambio, el código generado incluía la barra al final. ¡Gracias! –

Tal vez puedas probar:

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

Fuente

2009-08-03 20:57:48

Creo que es una manera más detallada de hacer lo mismo. –

creé una pequeña prueba,

código:

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

    var img = $('<img/>').attr({src : 'http://www.bennadel.com/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

Fuente

2009-08-03 21:06:15 Sander

Esa técnica no afecta el resultado. La etiqueta img aún no está cerrada en la fuente generada, de acuerdo con la extensión Web Developer. –

intentan escapar de su barra ... es posible que no lo coloca, ya que no se escapó:

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

También, no se olvide, si usted está escribiendo XHTML que es necesario incluir texto alt :)

Fuente

2009-08-04 00:50:31 Jason

Tiene razón sobre el atributo alt, pero no creo que deba escaparse a las barras diagonales en ese contexto. –

Respuesta

Cuestiones relacionadas