Comment créer des éléments DOM à partir de chaînes HTML (plusieurs méthodes)

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 élément dans un

, le nœud ne sera pas créé.

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