La méthode insertAdjacentHTML

Astuce par (Alsacréations, Strasbourg)
Créé le , mis à jour le (11744 lectures)
Tags : javascript, dom, innerhtml, insertadjacenthtml

La méthode insertAdjacentHTML est peu connue en JavaScript et pourtant bien utile. Si vous avez déjà souhaité manipuler dynamiquement du contenu HTML dans une page ou application web, vous avez certainement déjà utilisé les méthodes createNode() + appendChild() ou la propriété innerHTML, qui donne un accès direct au contenu d'un élément :

Exemple de code avec innerHTML

<div id="mondiv"></div>
<script>
document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">';
</script>

Mais cela remplace directement tout le contenu de l'élément (à moins de le récupérer avant par une pirouette).

Pour insérer du contenu en choisissant l'emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres :

  • la position d'insertion avec les mots clés :
    beforeBegin
    avant l'élément (équivalent à before en jQuery)
    afterBegin
    à l'intérieur au début (équivalent à prepend en jQuery)
    beforeEnd
    à l'intérieur à la fin (équivalent à append en jQuery)
    afterEnd
    après l'élément (équivalent à after en jQuery)
  • le code HTML à insérer

Exemple de code avec insertAjdacentHTML

<ul id="maliste">
  <li>Printemps</li>
  <li>Été</li>
  <li>Automne</li>
</ul>
<script>
document.getElementById('maliste').insertAdjacentHTML('beforeEnd','<li>Hiver</li>');
</script>

Prise en charge

Au niveau compatibilité, c'est une méthode désormais largement reconnue par les moteurs de navigateurs.

Navigateurs Versions
Internet Explorer Internet Explorer 4+
Firefox Firefox 8+
Chrome Chrome 1+
Safari Safari 4+
iOS Safari Mobile 5+
Opera Opera 7+

Commentaires

Ten a dit le

Super !!

Effectivement c'est utile, et dans bien des cas de figure c'est qu'innerHTML ou appendChild ! Je garde en stock, merci pour l'astuce :)

niuxe a dit le

merci pour l'astuce !

Fabustis a dit le

Merci pour la méthode, très pratique !

JGrim a dit le

:') .. Et pourtant j'avais cherché... Des heures durant ... Comment éviter ces infâmes pirouettes propres au DOM, qui dégueulassent invariablement le code.

Lisible, propre.. : Merci !

ghassen a dit le

bravo et merci ...

ghassen a dit le

bravo et merci ...

Borak a dit le

C'est génial ça. Et dire que je m’embêtais avec une solution compliquée :)