recherche

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
Linda Hamiltonoriginal
2024-11-05 02:29:02390parcourir

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);

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