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

é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!

Article précédent：J&#ai essayé de passer à Vue.js depuis React.js Article suivant：Quelle méthode est la meilleure pour restituer du HTML en images ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2852

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2987

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2487

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...