IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Bovino

0PARTAGES

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
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
<!-- beforebegin --><div><!-- afterbegin --> (...) <!-- beforeend --></div><!-- afterend -->

Une erreur dans cette actualité ? Signalez-le nous !