เมื่อสองสามวันก่อนขณะสร้างโครงการ ฉันได้รับคำถามหนึ่งที่ทำให้ฉันสนใจที่จะค้นหาและอ่านเกี่ยวกับเรื่องนี้ คำถามคือ:

“จะเกิดอะไรขึ้นถ้าฉันใช้สตริงเทมเพลตแทนการใช้ createElement เพื่อสร้างองค์ประกอบ HTML มันสร้างความแตกต่างหรือไม่”

ทั้ง “ document.createElement() ” และ “ แม่แบบตัวอักษร ” ทำให้เราสามารถสร้างองค์ประกอบต่าง ๆ ได้ จึงเกิดคำถามว่าจะใช้อะไรเมื่อใด มันสร้างความแตกต่างหรือไม่ถ้าเราใช้สิ่งเหล่านี้หรือเปลี่ยนใหม่? คุณจะพบเมื่อคุณอ่านต่อไป

สร้างองค์ประกอบ ()

• เมธอด createElement() เป็นฟีเจอร์ DOM ระดับ 1 ที่เปิดตัวในปี 1998
• มันเก่าและแข็งแกร่ง แต่ก็มีความซ้ำซ้อนเมื่อเราต้องสร้างองค์ประกอบเป็นระยะ ๆ
• การสนับสนุนเบราว์เซอร์สำหรับ createElement() นั้นดีที่97.92 %

• ตัวอักษรเทมเพลตถูกนำมาใช้ใน ES6 หรือที่เรียกว่า ECMAScript 6 ในปี 2558
• ใหม่กว่า เร็วกว่า มีโค้ดน้อยกว่า อ่านง่ายกว่า ดูแลรักษาง่าย และมีโอกาสจัดการกับบั๊กน้อยกว่า
• การสนับสนุนเบราว์เซอร์สำหรับสตริงเทมเพลตอยู่ที่97.11%ซึ่งไม่แตกต่างกันมากเมื่อเทียบกับ createElement() แต่นี่คือสิ่งที่เทมเพลตตัวอักษรใช้ไม่ได้กับ IE 11, Opera และ blackberry

ด้านล่างนี้เป็นตัวอย่างข้อมูลโค้ดเพื่อเพิ่มองค์ประกอบ HTML โดยใช้ createElement และเทมเพลตตัวอักษร

ทาง JS

ทางเลือกด้วยตัวอักษรแม่แบบ

บทสรุป

อย่างที่คุณเห็นในโค้ดตัวอย่างด้านบน ไม่มีความแตกต่างมากนักเมื่อเราสร้างองค์ประกอบโดยใช้ createElement() หรือใช้สตริงเทมเพลต ดังนั้น คำตอบของคำถามจึงขึ้นอยู่กับการเลือกสิ่งที่ดีที่สุดสำหรับคุณพร้อมกับเบราว์เซอร์ที่ผู้ใช้แอปพลิเคชันใช้งาน เนื่องจาก IE11, Opera และ Blackberry ยังไม่รองรับสตริงเทมเพลต คุณจึงเลือกใช้เมธอด createElement() ได้