Vì vậy, bạn đã bắt đầu viết mã, bạn biết kiến thức cơ bản về JavaScript và HTML và giờ bạn đã sẵn sàng để bắt đầu duyệt qua DOM. Giả sử bạn đã chọn một thành phần HTML bằng JavaScript và bây giờ bạn muốn thêm một số nội dung vào đó. Các thuộc tính innerHTML, textContent và innerText trong JavaScript đều có thể giúp bạn làm điều này, nhưng bạn chọn thuộc tính nào?
quả sung. 1Let’s say we have an unordered list made up of empty
Making use of the ids we gave to our
Như bạn có thể thấy ở đây, bất kể chúng tôi sử dụng thuộc tính nào, văn bản sẽ xuất hiện trên trang web của chúng tôi dưới dạng mục danh sách
quả sung. 4
Vì vậy, điểm có ba thuộc tính là gì nếu tất cả chúng đều làm điều tương tự?
Adding plain text to elements that already exist as we did above is pretty straightforward, but what if we were writing code that was a little more complex. For example, let’s say we hadn’t typed out any
- element via the id of “list” we previously gave to it, we can start adding in our HTML content as well as interpolating our plain text in between. Let’s try using the textContent property to create our list.quả sung. 5
- tag, and we spread it out over three separate lines.quả sung. 10
Sau đó, chúng tôi đã sử dụng InternalText và textContent trong JavaScript để điều khiển. đăng nhập văn bản đó vào bảng điều khiển của chúng tôi
quả sung. 11Chúng ta có thể thấy bên dưới, InternalText sẽ hiển thị nội dung trong bảng điều khiển tương tự như cách nó hiển thị trên trang, trong khi textContent sẽ là bảng điều khiển. ghi cùng một nội dung tương tự như cách nội dung ban đầu được nhập vào HTML, với nhiều khoảng trống hơn
quả sung. 12Kết luận
Do tính đơn giản của nó, InternalHTML có thể hấp dẫn để sử dụng, tuy nhiên, vì nó có thể làm chậm quá trình tải trang web của bạn và tạo ra rủi ro bảo mật, nên cách tốt nhất là tránh dùng InternalHTML và tách biệt các tác vụ tạo thành phần và thêm văn bản. Mặc dù cả textContent và InternalText sẽ thêm văn bản bạn muốn một cách an toàn, nhưng InternalText sẽ hiển thị nội dung rõ ràng hơn trong bảng điều khiển của bạn, vì vậy nó thường được ưu tiên hơn. Tôi hy vọng thông tin này đã giúp làm rõ sự khác biệt giữa InternalHTML, textContent và InternalText, cũng như giúp bạn quyết định nên sử dụng cái nào. Mã hóa vui vẻ
nguồn
"Thành phần. bên trongHTML. ” API Web. MDN, https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Element/innerHTML
Leng, Allen. “Cứ 2 khách truy cập thì có 1 người từ bỏ một trang web mất hơn 6 giây để tải. " Điện tử. com, kỹ thuật số. com, 19 tháng 4. 2022, https. //điện tử. com/1-trong-2-khách-từ-bỏ-trang-web-mất-hơn-6-giây-để-tải/#. ~. text=Tuy nhiên%2C%20khi%20it%20đến%20đến,sẽ%20đi%20sau%20one%20giây
Sử dụng InternalHTML trong JavaScript có an toàn không?
Cân nhắc về bảo mật . Vì lý do đó, bạn nên sử dụng thay vì InternalHTML. Thành phần. SetHTML[] để làm sạch văn bản trước khi nó được chèn vào DOM. HTML specifies that a tag inserted with innerHTML should not execute. For that reason, it is recommended that instead of innerHTML you use: Element. SetHTML[] to sanitize the text before it is inserted into the DOM.Đó có phải là một cách thực hành tốt để sử dụng InternalHTML không?
'innerHTML' Tiềm ẩn Rủi ro Bảo mật . Người dùng độc hại có thể sử dụng tập lệnh chéo trang [XSS] để thêm tập lệnh phía máy khách độc hại nhằm đánh cắp thông tin người dùng riêng tư được lưu trữ trong cookie phiên. Bạn có thể đọc tài liệu MDN trên InternalHTML. The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting [XSS] to add malicious client-side scripts that steal private user information stored in session cookies. You can read the MDN documentation on innerHTML .Tại sao không sử dụng HTML bên trong?
Có thể ngắt tài liệu . InternalHTML không cung cấp xác thực thích hợp, vì vậy bất kỳ mã HTML hợp lệ nào cũng có thể được sử dụng. Điều này có thể phá vỡ tài liệu của JavaScript. Ngay cả HTML bị hỏng cũng có thể được sử dụng, điều này có thể dẫn đến các sự cố không mong muốn.Tại sao nên sử dụng InternalHTML trong JavaScript?
Thuộc tính innerHTML có thể được sử dụng để viết html động trên tài liệu html . Nó được sử dụng chủ yếu trong các trang web để tạo html động như biểu mẫu đăng ký, biểu mẫu nhận xét, liên kết, v.v.
Đây là kết quả xuất hiện trên trang web của chúng tôi
quả sung. 6
Đ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'?
quả sung. 7
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
quả sung. số 8
Đ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
Hạn chế của InternalHTMLLo 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
Ảnh của BAY. D trên Bapt
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
Sử dụng cái gì thay thế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ỳ thành phần 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