insertAdlateHTML partout

Paul Kinlan

Twitter GitHub Glitch Mastodon Page d'accueil

Pour insérer du contenu dans un document HTML, trois possibilités s'offrent à vous:

• 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é 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:

Remarque:Le fait que les navigateurs implémentent cette méthode réduira considérablement la quantité de code nécessaire à l'écriture d'une bibliothèque JavaScript respectable. J'ai hâte de voir le jour où cette méthode sera plus largement disponible (en plus de querySelectorAll) pour que nous puissions vraiment nous attacher et simplifier considérablement le code.

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.