Comment puis-je convertir des chaînes HTML en éléments DOM en JavaScript ?

Création d'éléments DOM à partir de chaînes HTML

En JavaScript, il existe des cas où vous devez convertir des chaînes HTML en éléments DOM correspondants. Il s'agit d'une opération fondamentale pour créer et manipuler dynamiquement le contenu de la page, par exemple lors de l'ajout d'éléments au document.

Pour accomplir cette tâche, vous pouvez utiliser un DOMParser. La syntaxe d'utilisation de DOMParser est :

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

Ici, htmlString représente le code HTML que vous souhaitez convertir, et doc est le document résultant contenant les éléments DOM analysés.

Par exemple, considérez la chaîne HTML suivante :

<div>
    <a href="#"></a>
    <span></span>
</div>

À l'aide du DOMParser, vous pouvez convertir cette chaîne en un élément DOM comme suit :

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

L'objet doc contient désormais le HTML analysé en tant que DOM élément, qui peut être ajouté à la page à l'aide de méthodes telles que appendChild():

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

Cela ajoutera le contenu HTML analysé en tant qu'élément enfant du parentElement dans le DOM réel. Notez que DOMParser interprète le HTML de style XHTML, qui nécessite des balises fermantes, comme dans l'exemple ci-dessus.

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!