We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Oui) 48.0 (48.0) ? (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 48.0 (48.0) ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, NemoNobobyPersonne
Dernière mise à jour par : loella16,