Maison > Article > interface Web > Comment créer des éléments DOM à partir de chaînes HTML (plusieurs méthodes)
Comment créer des éléments DOM à partir de chaînes HTML (plusieurs méthodes)
- PHPzoriginal
- 2024-08-01 20:18:421123parcourir
Lorsque nous devons créer des éléments HTML DOM dynamiques simples, nous pouvons utiliser des modèles de chaînes HTML. Il existe de nombreuses méthodes différentes pour y parvenir en JavaScript, mais nous pourrions avoir quelques considérations.
intérieurHTML
const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;
C'est l'une des méthodes les plus courantes. Insérez la chaîne HTML dans le innerHTML d'un élément conteneur, puis accédez au nœud DOM généré.
Cependant, il ne peut gérer que les nœuds HTML valides, c'est-à-dire les éléments légaux dans les structures HTML standard. Par exemple, si vous essayez d'insérer un
De plus, cette méthode n'exécutera aucun script dans la chaîne HTML, ce qui est plus sûr lorsqu'il s'agit de contenu non fiable.
élément innerHTML + modèle
const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;
L'avantage d'utiliser le est qu'elle n'a aucune restriction de contenu et peut contenir tout type de structure HTML, y compris des éléments liés aux tableaux comme Cette méthode est similaire à innerHTML et ne peut gérer que les nœuds HTML valides. Il n'exécutera pas non plus de scripts. Cette méthode analyse la chaîne en créant un document HTML complet, puis extrait le nœud du document. Cela signifie qu'elle est relativement plus lente que les autres solutions et son utilisation n'est pas recommandée. Il ne peut gérer que les nœuds HTML valides et n'exécutera pas de scripts. Cette méthode est probablement la plus simple. Il ne peut également gérer que les nœuds HTML valides par défaut. Cependant, nous pouvons définir le contexte pour éviter cela. Notez qu'il exécutera des scripts dans la chaîne HTML, alors soyez particulièrement prudent lorsque vous traitez du contenu non fiable, par exemple en utilisant un nettoyeur comme DOMPurify. Pour différents cas, vous devrez peut-être choisir la méthode qui vous convient le mieux. Si vous trouvez mon contenu utile, veuillez envisagez de vous abonner. J'envoie une newsletter quotidienne avec les dernières mises à jour de développement Web. Merci pour votre soutien ! 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! et .
insertAdjacentHTML
const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;
DOMParseur
const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;
Range.createContextualFragment
const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;
Conclusion
Articles Liés
Voir plus