Comment ajouter du contenu HTML au DOM de manière sûre et efficace ?

Ajout de contenu HTML au DOM

Dans le domaine du développement Web, manipuler le modèle objet de document (DOM) pour modifier l'affichage du site Web le contenu est souvent nécessaire. Une tâche courante consiste à ajouter des chaînes HTML à des éléments spécifiques de la page. Bien qu'il existe plusieurs approches pour y parvenir, il est essentiel d'adhérer aux meilleures pratiques et d'utiliser des techniques largement prises en charge par les navigateurs modernes.

Une méthode qui a été remplacée consiste à attribuer l'intégralité du contenu HTML d'un élément à l'aide de div.innerHTML. = str. Cette approche peut être sujette aux erreurs et remplacer involontairement le contenu existant.

Une solution plus fiable consiste à exploiter la méthode insertAdjacentHTML, prise en charge par tous les principaux navigateurs. Cette méthode permet aux développeurs d'insérer du contenu HTML dans une position spécifique par rapport à un élément existant.

Pour ajouter du contenu HTML à un

<code class="javascript">div.insertAdjacentHTML('beforeend', str);</code>