Voir le flux RSS

Bovino

[Actualité] Modification d'un élément du DOM : le méconnu insertAdjacentHTML()

Note : 2 votes pour une moyenne de 4,50.
par , 13/05/2015 à 15h04 (953 Affichages)
Lorsque l'on veut modifier le contenu d'un document Web (et c'est principalement la finalité de JavaScript), certaines méthodes ou propriétés sont largement connues et utilisées.
En particulier, l'utilisation de la propriété innerHTML est très répandue, au point que cette propriété, à l'origine à l'origine spécifique à Internet Explorer, s'est généralisée à tous les navigateurs et a même fini par être intégrée aux spécifications HTML5.
On connait aussi les méthodes createElement(), createTextNode(), appendChild ou insertBefore().
L'ensemble de ces fonctionnalités permettant de faire beaucoup de choses. Mais pas tout, comme s'en est récemment rendu compte l'un de nos visiteurs.
Il souhaitait ajouter des champs dans une zone de son formulaire. Pour cela, il eut l'idée de récupérer la valeur de innerHTML, de la concaténer avec le champ supplémentaire puis affecter le nouveau contenu à innerHTML.
La technique est correcte en soi et fonctionne globalement bien. Globalement seulement car il y a un hic : en effet, si l'utilisateur avait déjà rempli des champs de cette partie du formulaire, cela n'avait pas eu d'impact sur le HTML et donc la réaffectation par innerHTML vidait les champs précédemment remplis.

Pour pallier ce désagrément, on aurait pu envisager deux alternatives possibles : soit faire une boucle sur les champs déjà remplis, affecter l'attribut value (ou selected pour les <option>) avec setAttribute() et là, l'utilisation de innerHTML aurait fonctionné correctement, soit passer par des création / insertion d'élément à l'aide de createElement() / appendChild.

Sauf que ces deux techniques sont un peu fastidieuses et verbeuses… surtout lorsque l'on dispose d'une méthode permettant de faire la même chose en une seule instruction.
Cette méthode, insertAdjacentHTML() est pourtant assez peu connue et on la rencontre rarement. Pourtant, elle est compatible tous navigateurs, y compris les versions anciennes d'Internet Explorer.

Son utilisation est simple :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
HTMLElement.insertAdjacentHTML(position, html);
Comme on peut le voir, elle s'applique à un objet HTMLElement et prend deux paramètres : la position de l'insertion par rapport à l'élément sur lequel on l'appelle et la chaine de caractère correspondant au code HTML à insérer.
Il existe quatre positions possible :
  • 'beforebegin' : le HTML sera inséré avant la balise d'ouverture de l'élément ciblé ;
  • 'afterbegin' : après la balise d'ouverture de l'élément ciblé ;
  • 'beforeend' : avant la balise de fermeture de l'élément ciblé ;
  • 'afterend' : après la balise de fermeture de l'élément ciblé.

Soit :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<!-- beforebegin --><div><!-- afterbegin --> (...) <!-- beforeend --></div><!-- afterend -->

Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Viadeo Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Twitter Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Google Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Facebook Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Digg Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Delicious Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog MySpace Envoyer le billet « Modification d'un élément du DOM : le méconnu insertAdjacentHTML() » dans le blog Yahoo

Mis à jour 13/05/2015 à 15h36 par Bovino

Catégories
Javascript , Développement Web

Commentaires

  1. Avatar de jojolebg
    • |
    • permalink
    J'imagine aussi que les Listeners d'évènements associés aux champs du formulaire seront perdus avec la technique du innerHtml