Il y a quelques jours, lors de la construction d'un projet, on m'a posé une question qui m'a vraiment intrigué de trouver et de lire à ce sujet. La question était :

"Et si j'utilisais des chaînes de modèle au lieu d'utiliser createElement pour créer des éléments HTML ? Cela fait-il une différence?"

" document.createElement() " et " template literals " nous permettent tous deux de créer des éléments donc la question se pose quand utiliser quoi ? Cela fait-il une différence si nous utilisons l'un d'entre eux ou si nous les remplaçons ? Vous le découvrirez au fur et à mesure de votre lecture.

créerÉlément()

• La méthode createElement() est une fonctionnalité DOM de niveau 1 introduite en 1998.
• C'est vieux et robuste, mais il y a redondance lorsque nous devons créer des éléments de temps en temps.
• Le support du navigateur pour createElement() est bon à 97,92 % .

• Les littéraux de modèle ont été introduits dans ES6 alias ECMAScript 6 en 2015.
• Il est plus récent, plus rapide, a moins de code, plus de lisibilité, est facile à entretenir et a moins de chances de traiter les bogues.
• La prise en charge du navigateur pour les chaînes de modèle est à 97,11 % , ce qui n'est pas une grande différence par rapport à createElement(), mais voici la chose que les littéraux de modèle ne fonctionnent pas sur IE 11, Opera et Blackberry.

Vous trouverez ci-dessous un exemple d'extrait de code pour ajouter des éléments HTML à l'aide de createElement et des littéraux de modèle.

façon JS

Alternative avec des littéraux de modèle

Conclusion

Comme vous l'avez vu, même dans l'exemple de code ci-dessus, il n'y a pas beaucoup de différence lorsque nous créons des éléments à l'aide de createElement() ou à l'aide de chaînes de modèle. La réponse à la question consiste donc à choisir ce qui vous convient le mieux avec le navigateur que les utilisateurs de l'application acceptent. Comme IE11, Opera et Blackberry ne prennent pas encore en charge les chaînes de modèle, vous pouvez choisir d'utiliser la méthode createElement().