Comment puis-je créer des éléments DOM à partir de chaînes HTML en JavaScript ?

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

La requête explore la faisabilité de convertir des chaînes HTML en éléments DOM pouvant être ajoutés à un élément parent. en utilisant appendChild(). Bien que d'autres méthodes comme innerHTML et innerText existent, elles n'offrent pas le niveau de flexibilité et de contrôle souhaité.

En JavaScript, vous pouvez utiliser un DOMParser pour réaliser cette conversion. Cet analyseur prend une chaîne HTML en entrée et génère un objet document représentant le contenu HTML. Le document analysé est ensuite accessible pour obtenir les éléments DOM correspondants.

Par exemple, considérons la chaîne HTML suivante stockée sous forme de variable JavaScript :

const htmlString = "<div><a href='#'>Link</a><span></span></div>";

Pour transformer cette chaîne en DOM élément, vous pouvez utiliser le code suivant :

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

firstChildElement représente désormais l'élément