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>

Prise en charge

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

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