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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Voir aussi

la méthode insertAdjacentText,
qui insère du texte à l'endroit spécifié
la méthode insertAdjacentElement,
qui insère un élément à l'endroit spécifié
la méthode prepend,
qui insère des éléments au début
la méthode append,
qui insère des éléments à la fin
la méthode appendChild,
qui insère des éléments à la fin du parent
la méthode insertBefore,
qui insère des éléments avant un élément