jQuery html() et balises de fin

Question

Lors de la création des éléments auto-fermés avec jQuery html() la question suivante se produit:

$('#someId').html('<li><input type="checkbox" /></li>') 

va créer

<li><input type="checkbox"></li> 

Il ferme la balise correctement <li> mais pas le <input>

Cela semble être un problème de innerHTML qui est utilisé dans la fonction html().

J'ai cherché partout et trouvé une solution pour cela, mais la page n'est plus disponible que vous voyez dans: http://dev.jquery.it/ticket/3378

Tout le monde sait comment résoudre ce problème?

Answer 1

Pour clarifier, ceci est valide HTML:

<input type="checkbox"> 

et c'est XML valide (y compris XHTML):

<input type="checkbox"/> 

mais il est pas HTML valide. Cela étant dit, la plupart des navigateurs l'accepteront probablement de toute façon (mais le document échouera à la validation si cela signifie quelque chose pour vous).

html() utilise innerHTML. Dans IE et éventuellement d'autres navigateurs, cela pose problème car XHTML est toujours modélisé en tant que DOM HTML. Voir Internal IE-HTML DOM still isn’t XHTML compliant.

Fondamentalement, il y a très peu de raisons d'utiliser XHTML. C'est un cauchemar cross-browser. Pour un résumé détaillé de pourquoi voir XHTML - Is writing self closing tags for elements not traditionally empty bad practise?, en particulier la première réponse.

Answer 2

À l'ère du HTML5, on pourrait faire valoir que <input type="checkbox"> et <input type="checkbox" /> sont des représentations tout aussi valides du même élément vide.

Tout cela est vrai, la raison innerHTML sérialise encore des éléments vides sans /> est double:

• Un élément vide est un élément vide quelle que soit la façon dont vous représentez au navigateur. Au moment où le navigateur a construit l'élément, son balisage est sans importance, et en ce qui concerne le DOM, ce qu'il est est un input élément de type case à cocher. Le seul endroit où l'élément "tag" est pertinent est sa propriété tagName et even that has its own quirk.

• Il n'y a aucune raison que ce soit pour un navigateur pour commencer sérialisation un élément vide avec la syntaxe /> lorsque HTML5 lui-même, en vertu d'être basé sur HTML, XML non, ne l'exige pas. Le fait d'utiliser la syntaxe /> annule inutilement la compatibilité avec les sites existants pour un gain absolument nul (car la présence du /> ne change en rien la signification de la sortie). Ce qui nous ramène à la réponse de Cletus en distinguant le balisage HTML et le balisage XHTML.

innerHTML, et par extension jQuery.html(), a été conçu pour vous donner une représentation HTML du contenu d'un élément du DOM. C'est pas conçu pour vous donner le balisage HTML que le navigateur utilisé pour construire l'élément dans le DOM. Vous ne pouvez pas "réparer" cela parce qu'il n'y a rien à corriger pour commencer. Ce que vous devez faire, c'est éviter de compter sur innerHTML d'un élément pour n'importe quoi d'autre que peut-être la session occasionnelle de débogage.

Voir aussi: Nested <p> tag auto-closing/opening