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

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

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

htmltext
<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.insertAdjacentText('afterEnd', 'text');

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

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

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

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

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

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

Voir aussi