Maison > interface Web > js tutoriel > Comment ajouter du HTML au DOM sans utiliser « div.innerHTML » ?

Comment ajouter du HTML au DOM sans utiliser « div.innerHTML » ?

Linda Hamilton
Libérer: 2024-11-05 02:29:02
original
445 Les gens l'ont consulté

How to Append HTML to the DOM Without Using `div.innerHTML`?

Ajouter du HTML au DOM sans utiliser div.innerHTML

Lorsque vous essayez d'ajouter une chaîne HTML au DOM, l'approche typique de div.innerHTML = str peut sembler pratique, mais elle est souvent déconseillée en raison des implications potentielles en matière de sécurité. Cette question explore une solution alternative pour ajouter des chaînes HTML à un élément spécifique.

Dans ce scénario, la tâche consiste à ajouter la chaîne HTML

Juste quelques text ici

au
élément avec le test d’identification. Pour y parvenir, l'approche privilégiée est d'exploiter la méthode insertAdjacentHTML supportée par tous les navigateurs modernes.

Voici comment procéder :

div.insertAdjacentHTML('beforeend', str);
Copier après la connexion

La méthode insertAdjacentHTML prend deux paramètres :

  • position : Indique où insérer le contenu HTML dans l'élément cible. Dans ce cas, beforeend ajoute le contenu à l'intérieur de l'élément, après son dernier enfant.
  • HTMLString : La chaîne HTML à insérer.

Utilisation de div.insertAdjacentHTML('beforeend', str) garantit que la chaîne HTML est ajoutée à l'intérieur du

élément, en conservant la structure DOM tout en évitant les problèmes de sécurité potentiels associés à l'utilisation de innerHTML.

Une démonstration en direct de cette solution peut être trouvée ici : http://jsfiddle.net/euQ5n/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal