Element.insertAdjacentText()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
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

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

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

js
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écifications

Specification
DOM Standard
# dom-element-insertadjacenttext

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi