数日前、プロジェクトを構築しているときに、私はそれについて見つけて読むことに本当に興味をそそられた質問を受けました。質問は次のとおりです。

「HTML 要素を作成するために createElement を使用する代わりに、テンプレート文字列を使用したらどうなるでしょうか? 違いはありますか？」

「document.createElement()」と「テンプレート リテラル」の両方で要素を作成できるため、いつ何を使用するかという疑問が生じます。それらのいずれかを使用したり、交換したりしても、違いはありますか? 読み進めていくとわかります。

createElement()

• createElement() メソッドは、1998 年に導入された DOM レベル 1 の機能です。
• 古くて堅牢ですが、時々要素を作成しなければならない場合、冗長性があります。
• createElement() のブラウザー サポートは97.92%で良好です。

• テンプレート リテラルは、2015 年に ES6 別名 ECMAScript 6 で導入されました。
• 新しいほど高速で、コードが少なくて読みやすく、保守が容易で、バグに対処する機会が少なくなります。
• テンプレート文字列のブラウザー サポートは97.11%で、createElement() と比較すると大きな違いはありませんが、テンプレート リテラルは IE 11、Opera、および blackberry では機能しません。

以下は、createElement とテンプレート リテラルを使用して HTML 要素を追加するサンプル コード スニペットです。

JSのやり方

テンプレートリテラルによる代替

結論

上記のサンプル コードでもわかるように、createElement() を使用して要素を作成する場合と、テンプレート文字列を使用して要素を作成する場合とでは、大きな違いはありません。したがって、質問に対する答えは、アプリケーションのユーザーが我慢しているブラウザーと一緒に、あなたに最適なものを選択することに帰着します. IE11、Opera、Blackberry はまだテンプレート文字列をサポートしていないため、createElement() メソッドを使用することを選択できます。