Pour insérer du contenu dans un document HTML, trois possibilités s'offrent à vous:
- Utiliser des méthodes DOM telles que
createNode
etappendChild
- Utiliser des fragments de document
- Utiliser
innerHTML
On peut dire que nous avons également document.write
pour quelques cas d'utilisation.
innerHTML
a été standardisé en HTML5 et a été ajouté à une méthode secondaire insertAdjacentHTML qui fonctionne comme innerHTML
, mais nous permet de définir plus précisément l'endroit où nous souhaitons insérer le contenu HTML: beforeBegin, afterBegin, avantEnd et afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
En 2008, John Resig a écrit un article sur insertAdtileHTML dont la conclusion était la suivante:
Jusqu'à présent, le principal problème avec insertAdtileHTML était son manque de compatibilité avec les navigateurs. À partir de la version 8, Firefox implémente insertAd manièreHTML. Ce plug-in est donc disponible dans tous les principaux navigateurs, y compris les navigateurs mobiles. Si vous souhaitez l'utiliser maintenant et vous assurer qu'il fonctionne dans les versions de Firefox antérieures à la version 8, vous pouvez utiliser ce polyfill.