Comment puis-je ajouter en toute sécurité des chaînes HTML brutes au DOM en JavaScript ?

Conversion de chaînes HTML brutes en éléments DOM pour ajout

JavaScript offre différentes manières de manipuler le contenu HTML, notamment en modifiant les propriétés innerHTML ou innerText de Éléments DOM. Cependant, il est parfois nécessaire de convertir une chaîne HTML brute en un élément DOM à utiliser avec des méthodes comme appendChild().

Utilisation de DOMParser

L'interface DOMParser permet l'analyse Chaînes XML et HTML en éléments DOM. Pour convertir une chaîne HTML brute en élément DOM à l'aide de DOMParser :

var xmlString = "<div><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");

La méthode parseFromString() analyse la chaîne HTML et renvoie un objet Document contenant la structure DOM analysée.

Accès aux éléments DOM

Pour accéder aux éléments DOM individuels dans le document analysé :

console.log(doc.firstChild.innerHTML); // Outputs: <a href='#'>Link...</a>
console.log(doc.firstChild.firstChild.innerHTML); // Outputs: Link

Utilisation

L'élément DOM analysé peut être maintenant transmis à appendChild() ou utilisé pour d'autres tâches de manipulation DOM, telles que :

var parentElement = document.getElementById("container");
parentElement.appendChild(doc.firstChild);

Cela ajoutera effectivement la chaîne HTML analysée en tant qu'élément DOM à l'élément #container.

Remarque : Il est important d'utiliser appendChild() avec l'élément DOM analysé obtenu via DOMParser, plutôt que d'ajouter directement la chaîne HTML brute, car cette dernière peut entraîner des failles de sécurité.

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!