2009-08-03 13 views
5

J'utilise Firefox 3.5. Mon doctype est XHTML 1.0 Strict. Disons que je veux insérer une image dans un div avec l'identifiant "foo"; alors je pourrais essayer:Manipulation DOM XHTML avec jQuery

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

Ceci ajoute en effet l'image. Mais j'ai remarqué que cela provoquait un comportement bizarre plus tard dans le document, que je soupçonnais être dû à la rupture de XHTML. Effectivement, en utilisant l'outil Web Developer pour Firefox, j'ai vérifié la source produite et a été horrifié de constater que, après l'exécution du script, j'ai:

<div id="foo"><img src="bar.gif"></div> 

D'où vient le slash sur la balise img go !? Autour de la recherche, je trouve que ce n'est pas un problème spécifique jQuery: Le code JavaScript pur

document.getElementById('foo').innerHTML = '<img src="bar.gif" />'; 

produit les mêmes résultats. Donc qu'est ce que je devrais faire? Je dois souligner que l'utilisation de la forme développée

<img src="bar.gif"></img> 

ne modifie pas le résultat. Comment puis-je insérer du code XHTML strictement valide dans mon document avec JavaScript?

+1

Il s'est avéré que le comportement étrange que j'observais était sans rapport. Mais lhnz a absolument raison quant au type MIME. Il s'avère que, lorsque text/html est utilisé, Firefox supprime les barres de fermeture inutiles en interne, de sorte que la source générée par Web Developer reflète cela. Morale de l'histoire: Serve application/xhtml + xml aux navigateurs qui le supportent, et text/xhtml au reste. –

Répondre

5

Ceci est un peu d'un coup de feu dans l'obscurité, et je ne suis pas sûr que cela pourrait être la cause, mais êtes-vous sûr que vous êtes au service de XHTML et pas seulement HTML standard avec la syntaxe de XHTMLs. C'est-à-dire: le type MIME du document est-il le texte par défaut/html ou est-ce application/xhtml + xml? J'ai récemment lu l'article suivant, et le problème que vous rencontrez me paraîtrait parfaitement logique si le document n'était pas réellement traité comme XML par le navigateur (et donc il supprimait les barres obliques de style XHTML pour ne pas conforme au type MIME) ...

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

Juste une pensée.

+0

Tout à fait raison! Je pensais que je servais ma page en tant qu'application/xhtml + xml, mais c'était en fait du texte/html. L'activation du commutateur a entraîné l'inclusion du slash de fin dans le code généré. Merci! –

2

Essayez ceci:

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

Je crois que c'est juste une façon plus verbeuse de faire la même chose. –

1

i créé un petit test,

Code:

$('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

+0

Cette technique n'affecte pas le résultat. La balise img n'est toujours pas fermée dans la source générée, en fonction de l'extension Web Developer. –

0

essayer échapper à votre barre oblique ... il est possible que ce n'est pas le placer car il est pas échappé:

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

aussi, ne pas oublier si vous écrivez XHTML que vous devez inclure alt texte :)

+0

Vous avez raison à propos de l'attribut alt, mais je ne pense pas que les barres obliques doivent être échappées dans ce contexte. –

Questions connexes