Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Nhược điểm của innerHTML trong JavaScript

1. Hiệu năng kém khi thêm nội dung

Không hỗ trợ append mà không phải re-parse toàn bộ innerHTML. Mỗi lần gán += đều làm trình duyệt parse lại toàn bộ cây DOM con.

let myDiv = document.querySelector('#myDiv');
myDiv.innerHTML += '<p>Added new tag</p>'; // Re-parse toàn bộ myDiv

2. Không validate HTML

innerHTML không kiểm tra tính hợp lệ — có thể chèn HTML broken làm hỏng cấu trúc trang.

3. Rủi ro bảo mật (XSS)

Nếu chèn dữ liệu người dùng không sanitize, kẻ tấn công có thể inject script độc hại.

Thay thế tốt hơn

  • element.append() / prepend() / before() / after() (DOM API hiện đại).
  • document.createElement() + appendChild().
  • insertAdjacentHTML() (chèn HTML mà không phá hủy listener/event trên node con).