Comment injecter du HTML dans votre DOM de manière sûre et efficace ?-js tutoriel-php.cn

Comment injecter du HTML dans votre DOM de manière sûre et efficace ?

Barbara Streisand

Libérer： 2024-11-04 13:11:01

original

443 Les gens l'ont consulté

How to Inject HTML into Your DOM Safely and Efficiently?

Injecter du HTML dans votre DOM : un guide complet

L'ajout de chaînes HTML à votre DOM est une tâche courante dans le développement Web. Dans cet article, nous explorerons une méthode efficace pour y parvenir sans recourir à la propriété innerHTML interdite.

Libérer la puissance de insertAdjacentHTML()

Pour ajouter dynamiquement du HTML à votre document, pensez à exploiter la méthode insertAdjacentHTML(). Cette fonctionnalité est universellement prise en charge par les navigateurs modernes et offre un moyen sûr et efficace de manipuler le DOM.

Syntaxe et utilisation

La méthode insertAdjacentHTML() prend deux paramètres :

position : La position où vous souhaitez insérer le HTML. Les valeurs valides incluent :
- beforebegin : avant le début de l'élément
- afterbegin : à l'intérieur de l'élément, avant son premier enfant
- beforeend : à l'intérieur de l'élément, après son dernier enfant
- afterend : Après la fin de l'élément
html : La chaîne HTML que vous souhaitez insérer

Exemple pratique

Imaginez que vous ayez un

élément avec un identifiant de test. Pour ajouter notre chaîne HTML à cet élément, nous utiliserions le code suivant :

let str = '<p>Just some <span>text</span> here</p>';
const div = document.getElementById('test');
div.insertAdjacentHTML('beforeend', str);

Copier après la connexion

Cela insérera le HTML dans le fichier

élément, après son dernier enfant.

Démonstration en direct

Pour une démonstration visuelle, veuillez visiter le JSFiddle suivant : http://jsfiddle.net/euQ5n/

Conclusion

L'utilisation de insertAdjacentHTML() fournit une solution robuste et compatible de manière croisée pour manipuler le DOM. Profitez de sa puissance pour injecter facilement des chaînes HTML dans vos pages Web.

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!

source：php.cn

Article précédent：Comment implémenter un rappel d'achèvement pour les boucles forEach asynchrones ? Article suivant：Semaine f #DaysOfCode : maîtriser les principes fondamentaux de JavaScript, créer un jeu de blackjack et ma première extension Chrome !

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

1894

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

2057

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

1729

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...