Firefox append

Votre sélecteur représente quelque chose qui est ou est dans une balise.

Une version beaucoup plus minimale de votre problème serait:

html:

js:

 $('#test').html('
test
'); 

résultat:

 
test 

Changez les choses pour ne pas mettre les balises p dans une balise, ou procédez comme suit:

 $('#test').empty().append('
test
'); 

Je voudrais élargir la réponse, quant à pourquoi se passe, et fournir une solution de contournement. En faisant un script GreaseMonkey, j’essayais de changer le contenu d’un élément, peut-être pas en tant que tel, mais en ajoutant plus d’éléments, car la balise ne contenait qu’un IMG.

Original:

Ce que j’ai essayé de faire était d’insérer un élément DIV qui envelopperait le déjà IMG et un autre deuxième enfant SPAN, l’objective était donc de se retrouver avec ceci:

 
text 

En utilisant la propriété innerHTML, ce serait comme ceci:

 ANode.innerHTML = '
' + ANode.innerHTML + 'text
'; 

mais à la place j’ai eu:

 
text 

Regarder les réponses ici a aidé un peu bien qu’il n’y ait pas de véritable explication. Après un moment, j’ai remarqué quelque chose qui ne se produit pas avec l’exemple de la question, ce qui, à mon avis, est la clé de ce problème. J’étais pareil que jfrobishow en pensant où cela se passait, je pensais qu’il y avait quelque chose qui n’allait pas concaténer l’ANode.innerHTML.

En répondant, à la question initiale, à la question de savoir où cela se produit, remarquez que nulle part enfermait à la fois les nœuds IMG et les nouveaux nœuds SPAN, ce qui m’a rendu curieux, les indésirables était ajouté juste avant que l’élément DIV ne soit “construit”. Ainsi, à partir de cet exemple original et de la solution de contournement suivante, vous remarquerez que cela se produit lorsque vous insérez un nouveau nœud BLOCK dans une ancre, car les éléments DIV et P (exemple original) sont des éléments BLOCK.

(Si vous ne savez pas ce que je veux dire par BLOCK provient de la propriété display d’un élément http://www.w3schools.com/cssref/pr_class_display.asp )

La solution évidente consiste à remplacer le type de nœud que vous insérez par un élément non bloquant. Dans mon cas, le problème était la DIV que je voulais, mais bien sûr, cela dépend de l’objective de votre script, la plupart des choses sont: là par conception, j’ai mis une DIV parce que j’en avais besoin, donc je l’ai fixée en la transformant en une autre SPAN (qui est un élément en ligne), mais j’avais encore besoin de me comporter comme un élément de bloc, alors mettez le style, c’est ce qui a fonctionné moi:

 ANode.innerHTML = '' + ANode.innerHTML + 'text'; 

Donc, clairement, ce problème ne vient pas de scripts (Javascript pour moi) mais de styles (CSS). BTW, cela est arrivé à Firefox 3.6.18, notez que cela ne se produit pas à Firefox 5.0.

Le problème est de placer des éléments de bloc à l’intérieur d’une balise d’ancrage. Ce n’est pas un code HTML valide, même si la plupart des navigateurs l’parsingront correctement.

Vous devez simplement utiliser un élément à l’intérieur de l’ancre, au lieu d’un

ou

.

Cela se produit car dans votre vous avez déclaré un espace de noms XML (xmlns). Si l’ancre xmlns ne casse rien, laissez la simplement là.

De même, n’utilisez pas async:false , créez une fonction de rappel à appeler en cas de succès.

EDIT: En fait, cela ne faisait que régler le problème avec cette valeur particulière… cela a commencé à se produire pour d’autres valeurs où cela fonctionnait bien.

D’une certaine manière, cela a résolu le problème.

Modifié

 jQuery(selector).html(valueToDisplay) 

à

 jQuery(selector).html( function(index, oldHtml) { return valueToDisplay; } ); 

Selon la doc, si je le lis correctement, il devrait faire la même chose car je n’utilise pas oldHtml dans la fonction. ( http://api.jquery.com/html/ ).

Dans la doc: “jQuery vide l’élément avant d’appeler la fonction; utilisez l’argument oldhtml pour référencer le contenu précédent.”

Essayez de changer dataType dans votre appel ajax en "text"

Utiliser .append () au lieu de .html () corrige le problème pour moi. Jamais vu cela avant aujourd’hui. Pourquoi ajoute-t-il des xmlns supplémentaires? J’ai essayé de changer mon dataType en “text” également, mais cela n’a pas fonctionné. C’était aussi vraiment gâcher mes styles CSS, mais utiliser .append () a complètement résolu le problème. Merci!

MISE À JOUR : Je devais remplacer complètement le contenu de mon div par le résultat d’une requête .ajax (). .append () par lui-même n’était pas suffisant, car cela appendait du contenu, alors j’ai trouvé une autre solution de contournement:

Commencez par effacer le div:

 $("#myDiv").html(""); 

Ensuite, ajoutez le contenu à l’aide de .append ():

 $("#myDiv").append("My content"); 

Ce n’est pas parfait, mais ça marche.