element.insertAdjacentHTML

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas  réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.

Syntaxe

element.insertAdjacentHTML(position, text);

Paramètres

position 
une DOMString  représentant la position relative à l'element, et doit être une des chaînes de caractères suivantes :
  • 'beforebegin' : Avant l'element  lui-même.
  • 'afterbegin' : Juste à l'intérieur de l'element , avant son premier enfant.
  • 'beforeend' : Juste à l'intérieur de l'element , après son dernier enfant.
  • 'afterend' : Après element lui-même.
text
 est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.

Visualisation des noms de position

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

Exemple

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// Ici la nouvelle structure est :
// <div id="one">one</div><div id="two">two</div>

Notes

Considérations de sécurité

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

Spécification

Spécification Statut Commentaire
DOM Parsing and Serialization
La définition de 'Element.insertAdjacentHTML()' dans cette spécification.
Version de travail

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
insertAdjacentHTMLChrome Support complet 1Edge Support complet 17
Support complet 17
Aucun support 12 — 17
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Support complet 8IE Support complet 4
Notes
Support complet 4
Notes
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Support complet 8Safari Support complet 4WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 8Opera Android Support complet 10.1Safari iOS Support complet 4Samsung 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