insertAdlateHTML partout

Paul Kinlan

Si vous souhaitez insérer du contenu dans un document HTML, vous avez trois possibilités:

• Utiliser des méthodes DOM telles que createNode et appendChild
• Utiliser des fragments de document
• Utiliser innerHTML

On peut dire que nous avons également document.write pour quelques cas d'utilisation.

innerHTML a été normalisé en HTML5, avec une méthode sœur insertAdjacentHTML qui fonctionne comme innerHTML, mais qui nous permet de définir plus précisément où nous voulons insérer le contenu HTML: beforeBegin, afterBegin, beforeEnd 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 insertAdjacentHTML, qui se concluait comme suit:

Remarque:L'implémentation de cette méthode par les navigateurs réduit considérablement la quantité de code nécessaire pour écrire une bibliothèque JavaScript de qualité. J'attends avec impatience le jour où cette méthode sera plus largement disponible (avec querySelectorAll) afin que nous puissions nous pencher sérieusement sur la simplification du code.

Jusqu'à présent, le principal problème de la méthode insertAdjacentHTML était son manque de compatibilité avec les navigateurs. Firefox implémente insertAdjacentHTML à partir de la version 8. Il sera donc disponible dans tous les principaux navigateurs, y compris les navigateurs mobiles. Si vous souhaitez l'utiliser dès maintenant et vous assurer qu'il fonctionne dans les versions antérieures à Firefox 8, vous pouvez utiliser ce polyfill.