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

Comment ajouter du HTML au DOM sans utiliser innerHTML ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 23:46:31764parcourir

How to Append HTML to the DOM Without Using innerHTML?

Ajout de HTML au DOM sans utiliser InnerHTML

Lors de l'ajout de chaînes HTML au DOM, vous pouvez rencontrer des scénarios dans lesquels l'utilisation de div.innerHTML = str; est inacceptable. Dans de tels cas, vous pouvez utiliser la méthode insertAdjacentHTML, qui est prise en charge par tous les navigateurs modernes.

Pour ajouter une chaîne HTML à un div avec l'identifiant « test », vous pouvez utiliser le code suivant :

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

La méthode insertAdjacentHTML permet d'insérer la chaîne HTML avant la fin de l'élément spécifié, assurant son insertion à l'intérieur de l'élément. Le paramètre de position "beforeend" spécifie que le HTML doit être ajouté après le dernier enfant de l'élément.

En utilisant la méthode insertAdjacentHTML, vous disposez d'un moyen polyvalent et efficace pour ajouter du HTML au DOM sans recourir au propriété innerHTML, qui peut avoir des implications en termes de performances et des vulnérabilités de sécurité dans certains contextes.

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