Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Element : méthode insertAdjacentText()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2018.

La méthode insertAdjacentText() de l'interface Element, étant donné une position relative et une chaîne de caractères, insère un nouveau nœud texte à la position donnée par rapport à l'élément sur lequel elle est appelée.

Syntaxe

js
insertAdjacentText(where, data)

Paramètres

where

Une chaîne de caractères représentant la position par rapport à l'élément sur lequel la méthode est appelée ; elle doit être l'une des chaînes de caractères suivantes :

  • 'beforebegin' : Avant un element même.
  • 'afterbegin' : Juste à l'intérieur d'un element, avant son premier enfant.
  • 'beforeend' : Juste à l'intérieur d'un element, après son dernier enfant.
  • 'afterend' : Après un element même.
data

Une chaîne de caractères à partir de laquelle créer un nouveau nœud texte à insérer à la position donnée where par rapport à l'élément sur lequel la méthode est appelée.

Valeur de retour

Aucune (undefined).

Exceptions

SyntaxError DOMException

Levée si where n'est pas une valeur reconnue.

Visualisation des noms de position

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  toto
  <!-- beforeend -->
</p>
<!-- afterend -->

Note : Les positions beforebegin et afterend ne fonctionnent que si le nœud est dans l'arbre et possède un élément parent.

Exemples

js
beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});

Consultez notre démonstration insertAdjacentText.html (angl.) sur GitHub (voir aussi le code source (angl.).) Voici un simple paragraphe. Vous pouvez saisir du texte dans l'élément de formulaire, puis appuyer sur les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte du paragraphe existant à l'aide de insertAdjacentText(). Notez que le nœud texte existant n'est pas ajouté à — d'autres nœuds texte sont créés et contiennent les nouveaux ajouts.

Spécifications

Spécification
DOM
# dom-element-insertadjacenttext

Compatibilité des navigateurs

Voir aussi