element.insertAdjacentHTML

Résumé

insertAdjacentHTML() parse le texte spécifié en tant que HTML ou XML et insert les noeuds résultants dans le DOM à la position spécifiée. Cela ne reparse pas l'élement qui est utilisé et cela ne corrompt pas les élements à l'intérieur de l'élément spécifié. Ceci et le fait d'éviter la sérialisation supplémentaire rend la fonction plus rapide et direct que innerHTML.

Syntaxe

element.insertAdjacentHTML(position, html);

position est la position relative à l'élement, et doit être une des chaînes de caractères suivantes :

beforebegin
Avant l'élément lui-même.
afterbegin
Juste à l'intérieur de l'élément, avant son premier enfant.
beforeend
Juste à l'intérieur de l'élément, après son dernier enfant.
afterend
Après l'élément lui-même.

text est la chaîne de caractères qui doit être parsé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 marchent 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>

Compatibilité navigateurs

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 8.0 (8.0) ? ? ?

Spécification

Voir également

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : TTBlist, fscholz, teoli, khalid32, JeanDavidDaviet
 Dernière mise à jour par : TTBlist,