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

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

Spécification

• HTML Standard: insertAdjacentHTML()

Voir également

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