Tại sao bạn không nên sử dụng InternalHTML?

Đây là kết quả xuất hiện trên trang web của chúng tôi

Điều đó chắc chắn không đúng. Điều gì xảy ra nếu chúng ta hoán đổi 'textContent' với 'innerText'?

Chà… tôi đoán điều đó tốt hơn một chút, nhưng đó vẫn không phải là thứ chúng tôi đang tìm kiếm. Có lẽ sử dụng 'innerHTML' thay vì 'innerText' sẽ cung cấp cho chúng tôi danh sách in đậm mà chúng tôi muốn

Điều đó có vẻ hoàn hảo. Mặc dù người bạn mới của chúng tôi, InternalHTML, đang hoạt động rất tốt ở đây, nhưng nó có một vài nhược điểm khá nghiêm trọng có thể gây ra sự cố cho trang web của chúng tôi

Lo ngại an ninh mạng

Tất cả ba thuộc tính (textContent, InternalText và InternalHTML) không chỉ thêm nội dung vào các phần tử trống mà còn thay thế bất kỳ nội dung hiện có nào. Vì InternalHTML có thể thêm nội dung bao gồm các đoạn mã HTML thực tế thay vì các chuỗi đơn giản nên nó có thể gây ra rủi ro bảo mật. Ví dụ: nếu bạn đang sử dụng InternalHTML để tạo biểu mẫu gửi trên trang web của mình và ai đó đã chọn gửi nội dung độc hại, điều đó có thể gây ra sự cố thực sự cho chính bạn cũng như những người dùng khác của trang web hoặc dự án của bạn. Vì lý do này, nếu một trang web hoặc dự án bạn đang thực hiện sắp được xem xét về bảo mật, việc sử dụng InternalHTML có thể khiến trang web hoặc dự án đó không vượt qua được bài kiểm tra và bị từ chối

không hiệu quả

Một nhược điểm khác của InternalHTML là nó chậm và không hiệu quả so với các tùy chọn khác. Giả sử bạn đang làm việc trên một dự án mà bạn cần tạo một phần tử mới cho mỗi mục trong một mảng, mảng mà bạn đã tạo trước đó trong mã của mình hoặc có thể là một mảng từ API có hàng trăm hoặc thậm chí hàng nghìn mục trong đó. Sử dụng InternalHTML, việc tải dữ liệu này có thể mất vài giây. Với tốc độ là một yếu tố quan trọng đối với người dùng trực tuyến ngày nay, những giây đó có thể tăng lên nhanh chóng. Theo một bài báo trên kỹ thuật số. com, 53% người mua sắm trực tuyến sẽ từ bỏ một trang web thương mại điện tử mất hơn 3 giây để tải (Leng, 2022). May mắn thay, có các tùy chọn khác khi thêm các phần tử HTML bằng JavaScript

Thêm HTML

Chúng ta đã thấy cách thêm tất cả các thành phần HTML và chuỗi văn bản cùng một lúc bằng cách sử dụng InternalHTML. Chúng tôi cũng đã vượt qua những hạn chế của việc làm như vậy. Một giải pháp thay thế tốt để làm cho mã của chúng ta an toàn và hiệu quả là tách riêng các tác vụ này

Trong hình trên, chúng tôi đã nhập lời chào của mình trong một mảng có tên là 'lời chào. ' Sau đó, chúng tôi đã tạo một vòng lặp 'forEach' cho mảng này và đối với mỗi mục trong mảng, chúng tôi yêu cầu nó tạo một thẻ li mới, tạo một thẻ mạnh mới, chọn phần tử ul của chúng tôi, nối một thẻ li mới được tạo vào . Chà, nghe có vẻ nhiều, nhưng chia nhỏ ra, chúng ta chỉ đơn giản là tạo bất kỳ phần tử HTML mong muốn nào, chọn nơi chúng ta muốn, nối chúng vào vị trí đó và thêm vào văn bản của chúng ta

InternalText vs TextContent

If you don’t need to insert any HTML, you can go straight to selecting which element you want to add content to, and entering your text with innerText or textContent as we did in fig. 3. Generally speaking, you’ll want to opt for innerText because textContent can produce messy code. For example, let’s say we had written some text in our HTML under a