Một vài ngày trước khi xây dựng một dự án, tôi đã nhận được một câu hỏi khiến tôi thực sự tò mò muốn tìm và đọc về nó. Câu hỏi là:

“Điều gì sẽ xảy ra nếu tôi sử dụng các chuỗi mẫu thay vì sử dụng createElement để tạo các phần tử HTML? Liệu nó có bất kỳ sự khác biệt?"

Cả “ document.createElement() ” và “ template literals ” đều cho phép chúng ta tạo các phần tử nên câu hỏi đặt ra là khi nào thì sử dụng cái gì? Có sự khác biệt nào nếu chúng ta sử dụng hoặc thay thế chúng không? Bạn sẽ tìm ra khi bạn tiếp tục đọc.

tạo phần tử ()

• Phương thức createElement() là một tính năng cấp 1 của DOM được giới thiệu vào năm 1998.
• Nó cũ và mạnh mẽ nhưng sau đó sẽ có sự dư thừa khi thỉnh thoảng chúng ta phải tạo các phần tử.
• Trình duyệt hỗ trợ cho createElement() ở mức tốt là 97,92 % .

• Mẫu chữ đã được giới thiệu trong ES6 hay còn gọi là ECMAScript 6 vào năm 2015.
• Nó mới hơn, nhanh hơn, ít mã hơn, dễ đọc hơn, dễ bảo trì và có ít cơ hội xử lý lỗi hơn.
• Trình duyệt hỗ trợ chuỗi mẫu ở mức 97,11 % , đây không phải là sự khác biệt lớn khi so sánh với createElement() nhưng đây là điều mà các mẫu chữ không hoạt động trên IE 11, Opera và blackberry.

Dưới đây là đoạn mã mẫu để thêm các thành phần HTML bằng cách sử dụng createElement và mẫu chữ.

cách JS

Thay thế bằng chữ mẫu

Sự kết luận

Như bạn đã thấy ngay cả trong mã mẫu ở trên, không có nhiều sự khác biệt khi chúng ta tạo các phần tử bằng cách sử dụng createElement() hoặc sử dụng các chuỗi mẫu. Vì vậy, câu trả lời cho câu hỏi nằm ở việc chọn cái gì phù hợp nhất với bạn cùng với trình duyệt mà người dùng ứng dụng đang sử dụng. Vì IE11, Opera và Blackberry chưa hỗ trợ chuỗi mẫu, bạn có thể chọn sử dụng phương thức createElement().