innerHTML, t’es une ordure !

Oui, le titre peut surprendre mais il est justifié.

Mais avant tout, une petite explication pour ceux qui ne codent pas en Javascript : innerHTML est une propriété qui existe sur tous les éléments qui sont des balises paires (une balise d’ouverture et une de fermeture), elle permet de modifier le contenu de cet élément de façon très simple, en effet, il suffit de faire ceci :

element.innerHTML = ‘Test’;

Et cela aura pour effet d’insérer le texte “Test” entre les balises d’ouverture et de fermeture de l’élément.  Ainsi on peut modifier le contenu d’un élément bien plus facilement qu’avec le DOM (plus lent et plus long à écrire, mais pourtant bien plus puissant).

Bref, je ne suis pas un fan absolu de innerHTML mais il faut reconnaître qu’il est bien utile des fois, notamment quand on veut insérer pas mal de balises et de texte en Javascript. Seulement, voilà, dernièrement j’ai réalisé un code de ce genre :

element.innerHTML = ‘<input type="text" />’;
element.firstChild.value = ‘Test’;
element.innerHTML += ‘<input type="button" value="Sauvegarder" />’;

Et soudain…

OMGWTFBBQMon premier input ne contient pas le texte défini !! Mais pourquoi ?! En fait il se trouve que la propriété value n’est pas enregistrée dans le innerHTML, ce qui fait que lorsque j’écris :

element.innerHTML += ‘<input type="button" value="Sauvegarder" />’;

C’est comme si j’avais écrit :

element.innerHTML = ‘<input type="text" />’ + ‘<input type="button" value="Sauvegarder" />’;

Voilà pourquoi mon texte n’apparaît pas, le innerHTML contient ce que l’on peut voir dans le code source généré, pas plus. Alors pour la propriété value ce n’est pas vraiment un problème car je peux faire ça :

element.innerHTML = ‘<input type="text" value="Test" />’;

Là j’ai écrit la valeur directement dans le innerHTML, elle est donc sauvegardée. En revanche, pour des évènements créés par le biais du DOM-0 ou le DOM-2 c’est déjà plus problématique…

Alors certains me diront que c’était évident mais que voulez-vous, on ne peut pas toujours penser à tout ! =p

Au final le meilleur moyen pour définir des propriétés qui n’apparaissent pas dans le innerHTML c’est d’utiliser le DOM, mais attention à ne pas faire comme moi : Sur un même élément, si vous ajoutez quelque chose à l’aide du DOM puis que vous faites une concaténation de la propriété innerHTML comme je l’ai fait plus haut alors ça ne fonctionnera pas.

Sur ce, je retourne coder un projet secretolol.

Nes’

PS : Je trouve que cet article est super mal rédigé, si vous êtes de cet avis alors jetez-moi des pierres T_T

Samedi, 25 avril 2009 Développement, Javascript

30 commentaires pour innerHTML, t’es une ordure !

  1. Rien que pour le plaisir je t’en jette une, de pierre.

    Je pense que le comportement est tout à normal, dans le sens ou… Quand on fait un innerHTML, le contenu n’est __pas__ évalué, et donc n’est pas mis en place dans l’objet de l’élément dans lequel le innerHTML a été inséré. C’est à dire, l’élément, ok, il est inséré, mais pas au niveau du DOM…

    Un petit coup dans Firebug pour checker, peut-être ?

  2. Talus le 26 avril 2009
  3. (Si j’ai tort, merci d’envoyer les pierres sur Nes, apparement, il aime ca :D)

  4. Talus le 26 avril 2009
  5. Tu n’as pas tort, le comportement est normal, de toutes façons c’est que je souhaitais affirmer dans cet article. Concernant Firebug, j’avais déjà regardé, c’est ce qui m’a permit de trouver l’erreur ;)

  6. Nesquik69 le 26 avril 2009
  7. Moi j’y connais rien, et même tes explication je les comprends pas, mais bon, je peux toujours aller chercher le lance-pierre.

    J’aime le lolcat.

    Pour ceux que ça n’intéresse pas, sachez que c’est super chaud de passer du qwerty au azerty puis l’inverse en une semaine (voyage en france). Et l’azerty ça puxxe.

  8. vDJ le 26 avril 2009
  9. Putain mais vDJ en s’en fout de ta vie x)

  10. Nesquik69 le 26 avril 2009
  11. Plussun : tiens, pour la peine, je vais lapider le tecktoboy §§

  12. Talus le 26 avril 2009
  13. T’inquiète pas, je suis résistant !

  14. Nesquik69 le 26 avril 2009
  15. “PS : Je trouve que cet article est super mal rédigé[...]”
    Putain, grilled…

    Sinon je suis un peu comme vDJ, je pige rien… Mais moi je dit azerty > qwerty…

  16. IATGOF le 26 avril 2009
  17. Mais osef de vos configurations de clavier §

  18. Nesquik69 le 26 avril 2009
  19. Je te jète pas des pirres ! je te jette du joujouba ! fichu nes’ ! t’as rien à faire que d’écrire ça !
    Nan mais c’est comme si tu voulais pas écrire !

    Nan je rigole, mais c’est vrai que ton article est mal rédigé -_- …

  20. tarkan-t29 le 26 avril 2009
  21. Moi aussi je vais jeter des pierres ! ^^
    Parce qu’en effet, la rédaction, c’est pas ça… :/

    J’ai dû relire l’article deux fois avant de comprendre le problème. >_<

  22. Golmote le 27 avril 2009
  23. En le rédigeant je le trouvais mal conçu moi aussi mais j’avais la flemme de le modifier ^^’

    Edit : Putain j’avais un bug d’évènements depuis deux jours, devinez à cause de quoi ? innerHTML =°

  24. Nesquik69 le 27 avril 2009
  25. qwerty > azerty, s’too.
    Enfin, pas le qwerty américain…

  26. vDJ le 27 avril 2009
  27. Putain, mais osef, suffit de pas être manchot des doigts pour taper en qwerty ET en azerty.

    Sinon, je remarque que je rédige toujours des messages avec “sinon” dedans.

    Et j’y comprends rien au javascript, je sais juste que ça fait des pop-ups. Et c’est mal rédigé.

  28. POYO le 27 avril 2009
  29. Bah faudrait savoir, et puis moi je maintient que azerty > qwerty…
    (oui y’a pas d’argumentation mais c’est juste pour le plaisir de flooder un peu le billet terriblement mal rédigé de Nes’)

  30. IATGOF le 28 avril 2009
  31. Enfoiré =°

  32. Nesquik69 le 28 avril 2009
  33. De rien ;-)

  34. IAT le 28 avril 2009
  35. Cherche pas, c’est pas pour rien que le qwerty est +/- (car il y a des variations régionales) utilisé dans le monde entier, et l’azerty rien qu’en france…
    (Et ne réponds pas un truc du style “Ce n’est pas parce qu’ils nombreux à avoir tort qu’ils ont raison”, ça ne s’applique pas).

    En gros, l’azerty c’est un truc bien pour les franco-français qui écrivent que du français.

    Ouh ce TROLL j’en suis tout haletant.

  36. vDJ le 28 avril 2009
  37. Mouais, enfin, c’est vrai qu’écrire sur un clavier qwerty espagnol, c’est assez hardcore. Pour avoir testé, je ne le referais pour rien au monde.

  38. POYO le 28 avril 2009
  39. Non mais l’azerty ça pue, je le reconnais =D

    (Putain j’en viens même à parler HS sur mon propre article…)

  40. Nesquik69 le 28 avril 2009
  41. J’ai rien compris.
    Sinon, il y a le « § » sur l’Azerty, donc azerty > qwerty (CQFD).

  42. Tydax le 28 avril 2009

  43. Euh, ouais, mais FAIL. §§§§§§§
    Altgr - 4, en force, quoi.
    Et c’est une question d’habitude, quoi. Faut profiter, tant qu’on est jeune on peut passer de l’un à l’autre easy. Si à 40 balais, tu te trimballes ton clavier PS/2 azerty lorsque tu vas bosser aux USA…Mieux vaut s’habituer jeune au qwerty.

  44. vDJ le 28 avril 2009
  45. Je préfère me balader avec mon portable perso §§

    Facon, je passe aussi bien de l’un à l’autre… Et ayant aussi testé le qwerty espagnol, je préfère l’azerty §§

  46. Talus le 29 avril 2009
  47. Moi j’dis, le pire, c’est l’azerty utilisé en qwerty (Half-Life 1) par exemple, c’est trop la merde parce que tu dois connaitre chaque emplacement de touches.
    Perso, je pense pouvoir utiliser un qwerty sans trop trop de problème (Half-life 1 again), j’ai juste un problème pour les nombres au dessus du clavier : en général, je teste toutes les touches pour trouver un symbôle =°

  48. Tydax le 29 avril 2009
  49. “Moi j’dis, le pire, c’est l’azerty utilisé en qwerty (Half-Life 1) par exemple, c’est trop la merde parce que tu dois connaitre chaque emplacement de touches.”
    -> +1.
    Après quand ça devient une habitude c’est super chiant “hqhq ozned…” T_T

    azerty roxXXXXx c’est tout.

  50. IATGOF le 29 avril 2009
  51. Tydax => Alt+Maj et hop ! Tout ce que tu écris sur ton clavier azerty sera retranscrit en qwerty sur le PC (essaye avec le notepad si tu veux).

  52. Nesquik69 le 29 avril 2009
  53. J’ai rien compris non plus, comme Tyduske \o/

    Et sinon, alt+maj ça change le driver, et j’ai pas de driver qwerty sur mon PC… Donc je peux pas passer en qwerty.
    (Oui je sais qu’il est par défaut dans windows =° )

  54. Zanpa le 30 avril 2009
  55. *Lance des cailloux!* :>
    Il est vrai que même avec de l’expérience on peut encore être bien surpris.
    Un petit conseil en passant concernant le PHP : vérifiez que vous faites bien vos tests en affichant la BDD locale… c’est marrant sur le coup mais ça fait bien perdre du temps sinon ! x)

    Quant au QWERTY, et à l’AZERTY, Nesquick69 pourquoi ne nous créerais-tu pas un petit code qui permet de transformer une saisie QWERTY en AZERTY, histoire de pouvoir poster correctement, en écrivant cependant en QWERTY ? À l’utilisateur alors de se souvenir des touches attribuées à l’AZERTY s’il active cette option.

  56. Aztek le 16 juin 2009
  57. Salut,

    Je te lance plein de caillou.

    AZERTY>ALL.

    QWERTY<NOOB

    8P

  58. toto le 8 décembre 2009
  59. tous des malades!!!!!

  60. mimi le 14 mars 2010

Laisser un commentaire

Catégories

Recherche