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

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 :
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 :