Méthode insertAdjacentElement
La méthode insertAdjacentElement permet
d'insérer un élément n'importe où dans la page.
Elle est le plus souvent utilisée après la création d'un élément
avec createElement.
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 lui (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.insertAdjacentElement(méthode d'insertion, code à insérer);
Exemple . Méthode beforeBegin
Supposons que l'élément de référence soit l'élément #target.
Insérons un nouveau paragraphe avant lui :
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Résultat de l'exécution du code :
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Voir aussi
-
la méthode
insertAdjacentHTML,
qui insère des balises à l'endroit spécifié -
la méthode
insertAdjacentText,
qui insère du texte à 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
