Supposons que vous ayez du HTML qui est une chaîne:
let string_of_html = ` Cool `;Peut-être que cela vient d'une API ou que vous l'avez construit vous-même à partir de littéraux de modèle ou de quelque chose.
Vous pouvez utiliser innerHTMLpour mettre cela dans un élément, comme:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Vous avez un peu plus de contrôle si vous utilisez la insertAdjacentHTMLfonction car vous pouvez placer le nouveau HTML à quatre endroits différents:
text inside node Vous l'utilisez comme…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Il y a des circonstances dans lesquelles vous voudrez peut-être que le DOM nouvellement créé soit toujours en JavaScript avant de faire quoi que ce soit avec lui. Dans ce cas, vous pouvez d'abord analyser votre chaîne, comme:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Cela vous donnera un DOM complet, vous devrez donc retirer l'enfant que vous avez ajouté. En supposant qu'il n'a qu'un seul élément parent, c'est comme…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Maintenant, vous pouvez jouer avec cela new_elementau besoin, je suppose avant de faire ce que vous devez en faire.
C'est un peu plus simple de le faire cependant:
let new_element = document.createRange() .createContextualFragment(string_of_html);Vous obtiendrez l'élément directement sous forme de fragment de document à ajouter ou quoi que ce soit selon vos besoins. Cette méthode est remarquable en ce qu'elle exécutera en fait s qu'elle trouve à l'intérieur, ce qui peut être à la fois utile et dangereux.
Il y a une quantité considérable de nuances dans tout cela. Par exemple, le HTML doit être valide. Un HTML mal formé ne fonctionnera tout simplement pas. Malformé peut également vous surprendre, comme mettre un
Koen Schaft écrit «Créer un nœud DOM à partir d'une chaîne HTML» qui couvre ce que nous avons ici mais plus en détail et avec plus de pièges.
échouera car il manque un fichier. #####