Element.insertAdjacentText()

La méthode insertAdjacentText() insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

Syntaxe

element.insertAdjacentText(position, element);

Paramètres

position
Une DOMString (chaîne de caractères) représentant la position par rapport à l'element ; elle doit être l'une des chaînes suivantes :
  • 'beforebegin' : avant l'element lui-même ;
  • 'afterbegin' : à l'intérieur de l'element, avant son premier enfant ;
  • 'beforeend' : à l'intérieur de l'element, avant son dernier enfant ;
  • 'afterend' : après l'element lui-même.
element
Une DOMString (chaîne de caractères) représentant le texte à insérer dans l'arbre.

Valeur renvoyée

Vide.

Exceptions

Exception Explication
SyntaxError La position indiquée n'est pas une valeur reconnue.

Visualisation des noms de position

<!-- beforebegin -->
<p>
<!-- afterbegin -->
machin
<!-- beforeend -->
</p>
<!-- afterend -->
Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

Exemple

beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

afterBtn.addEventListener('click', function() {
  para.insertAdjacentText('beforeend',textInput.value);
});

Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte de paragraphe existant en utilisant insertAdjacentText(). Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

Émulation

Vous pouvez utiliser une émulation de la méthode insertAdjacentText() dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :

if (!Element.prototype.insertAdjacentText)
  Element.prototype.insertAdjacentText = function(type, txt){
    this.insertAdjacentHTML(
      type,
      (txt+'') // convertir en chaîne de caractères
        .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
        .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
    )
  }

Spécification

Spécification Statut Commentaire
DOM
La définition de 'insertAdjacentText()' dans cette spécification.
Standard évolutif

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
insertAdjacentTextChrome Support complet 1Edge Support complet 18
Support complet 18
Support complet 12
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Support complet 48IE Support complet Oui
Notes
Support complet Oui
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Support complet OuiSafari Support complet 10WebView Android Support complet 2.3Chrome Android Support complet 18Firefox Android Support complet 48Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi