Méthode insertAdjacentHTML

La méthode insertAdjacentHTML permet d'insérer une chaîne de code HTML à n'importe quel endroit de la page. Le code est inséré par rapport à un élément de référence. Il est possible de faire une insertion avant l'élément de référence (méthode d'insertion 'beforeBegin'), après celui-ci (méthode d'insertion 'afterEnd'), ainsi qu'au début (méthode d'insertion 'afterBegin') ou à la fin (méthode d'insertion 'beforeEnd') de l'élément de référence.

Syntaxe

javascriptélément de référence.insertAdjacentHTML(méthode d'insertion, code à insérer);

Exemple . Méthode beforeBegin

Soit l'élément de référence - l'élément #target. Insérons un nouveau paragraphe avant celui-ci :

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Résultat de l'exécution du code :

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

Exemple . Méthode afterEnd

Maintenant, insérons un nouveau paragraphe après l'élément de référence :

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Résultat de l'exécution du code :

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

Exemple . Méthode afterBegin

Insérons un nouveau paragraphe au début de l'élément de référence :

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Résultat de l'exécution du code :

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

Exemple . Méthode beforeEnd

Insérons un nouveau paragraphe à la fin de l'élément de référence :

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Résultat de l'exécution du code :

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

Voir aussi