La méthode 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>