Méthode insertAdjacentText
La méthode insertAdjacentText permet
d'insérer une chaîne de caractères n'importe où sur la page. La chaîne
est insérée par rapport à un élément de référence.
On peut effectuer l'insertion avant l'élément de référence
(méthode d'insertion 'beforeBegin'), après
lui (méthode d'insertion 'afterEnd'), ou
bien 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.insertAdjacentText(méthode d'insertion, texte à insérer);
Exemple . Méthode beforeBegin
Supposons que l'élément de référence soit l'élément #target.
Insérons devant lui un texte quelconque :
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');
Résultat de l'exécution du code :
text
<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.insertAdjacentText('afterEnd', 'text');
Résultat de l'exécution du code :
<div id="target">
<p>elem</p>
</div>
text
Exemple . 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.insertAdjacentText('afterBegin', 'text');
Résultat de l'exécution du code :
<div id="target">
text
<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.insertAdjacentText('beforeEnd', 'text');
Résultat de l'exécution du code :
<div id="target">
<p>elem</p>
text
</div>
Voir aussi
-
la méthode
insertAdjacentElement,
qui insère un élément à l'endroit spécifié -
la méthode
insertAdjacentHTML,
qui insère du code à 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
