Comment ajouter du HTML au DOM sans utiliser « 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);

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!

html String for while using append dom this innerHTML position http

Déclaration：

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

Article précédent：J&#ai essayé de passer à Vue.js depuis React.jsArticle suivant：J&#ai essayé de passer à Vue.js depuis React.js

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript