Beberapa hari yang lalu saat membangun sebuah proyek, saya mendapat pertanyaan yang sangat menggelitik saya untuk menemukan dan membacanya. Pertanyaannya adalah:

“Bagaimana jika saya menggunakan string template daripada menggunakan createElement untuk membuat elemen HTML? Apakah ada bedanya?”

Baik “ document.createElement() ” dan “ template literal ” memungkinkan kita membuat elemen sehingga muncul pertanyaan kapan harus menggunakan apa? Apakah ada bedanya jika kita menggunakan salah satu dari mereka atau menggantinya? Anda akan mengetahuinya saat Anda terus membaca.

buatElemen()

• Metode createElement() adalah fitur level-1 DOM yang diperkenalkan pada tahun 1998.
• Itu tua dan kuat tetapi kemudian ada redundansi ketika kita harus membuat elemen sesekali.
• Dukungan browser untuk createElement() bagus di 97,92 % .

• Template literal diperkenalkan di ES6 alias ECMAScript 6 pada tahun 2015.
• Ini lebih baru lebih cepat, memiliki lebih sedikit kode lebih mudah dibaca, mudah dipelihara, dan memiliki lebih sedikit peluang untuk menangani bug.
• Dukungan browser untuk string template adalah 97,11% yang tidak terlalu berbeda jika dibandingkan dengan createElement() tetapi ada satu hal yang literal template tidak berfungsi pada IE 11, Opera, dan blackberry.

Di bawah ini adalah cuplikan kode contoh untuk menambahkan elemen HTML menggunakan createElement dan template literal.

cara JS

Alternatif dengan templat literal

Kesimpulan

Seperti yang Anda lihat bahkan dalam kode contoh di atas, tidak banyak perbedaan saat kita membuat elemen menggunakan createElement() atau menggunakan string template. Jadi jawaban atas pertanyaan tersebut adalah memilih apa yang terbaik untuk Anda bersama dengan browser yang digunakan oleh pengguna aplikasi. Karena IE11, Opera dan Blackberry belum mendukung string template, Anda dapat memilih untuk menggunakan metode createElement().