Khi nào nên sử dụng .innerHTML và khi document.write trong JavaScript

Question

Có quy tắc chung hay không, khi nào nên sử dụng document.write để thay đổi nội dung trang web và thời điểm sử dụng .innerHTML?

Cho đến nay quy tắc của tôi là:

1) Sử dụng document.write khi thêm nội dung mới

2) Sử dụng .innerHTML khi thay đổi hiện nội dung

Nhưng tôi đã nhầm lẫn, vì ai đó nói với tôi rằng một mặt .innerHTML là một tiêu chuẩn Microsoft lạ, nhưng mặt khác tôi đọc rằng document.write không được phép trong XHTML.

Tôi nên sử dụng cấu trúc nào để thao tác mã nguồn của mình bằng JavaScript?

Answer 1

innerHTML có thể được sử dụng để thay đổi nội dung của DOM bằng cách xâu chuỗi. Vì vậy, nếu bạn muốn thêm một đoạn văn với một số văn bản ở phần cuối của một phần tử được chọn bạn có thể để một cái gì đó giống như

document.getElementById('some-id').innerHTML += '<p>here is some text</p>'

Mặc dù tôi muốn đề nghị sử dụng càng nhiều API cụ DOM thao tác càng tốt (ví dụ document.createElement, document.createDocumentFragment, <element>.appendChild, v.v.). Nhưng đó chỉ là sở thích của tôi.

Thời gian duy nhất tôi thấy việc sử dụng áp dụng document.write là trong HTML5 Boilerplate (xem cách nó kiểm tra xem jQuery đã được tải đúng cách chưa). Ngoài ra, tôi sẽ tránh xa nó.

Answer 2

innerHTML và document.write không thực sự so sánh các phương pháp để tự động thay đổi/chèn nội dung, vì việc sử dụng của chúng khác nhau và cho các mục đích khác nhau.

document.write nên được gắn với các trường hợp sử dụng cụ thể. Khi một trang đã được tải và DOM ready xảy ra, bạn không thể sử dụng phương thức đó nữa. Đó là lý do tại sao thường được sử dụng nhiều nhất trong các câu lệnh có điều kiện, trong đó bạn có thể sử dụng nó để đồng bộ tải tệp JavaScript bên ngoài (thư viện javascript), bao gồm các khối <script> (ví dụ: khi bạn tải jQuery từ CDN trong HTML5 Boilerplate).

Những gì bạn đọc về phương pháp này và XHTML là đúng khi trang được phục vụ cùng với các loại application/xhtml+xml kịch câm: Từ w3.org

document.write (như document.writeln) không làm việc trong các văn bản XHTML (bạn sẽ nhận được lỗi "Thao tác không được hỗ trợ" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) trên bảng điều khiển lỗi). Đây là trường hợp nếu mở một tập tin địa phương có phần mở rộng tập tin .xhtml hoặc cho bất kỳ tài liệu phục vụ với một application/xhtml + xml MIME loại

Một khác biệt giữa các phương pháp tiếp cận có liên quan trên chèn nút: khi bạn sử dụng phương pháp .innerHTML bạn có thể chọn vị trí để thêm nội dung, trong khi sử dụng document.write nút chèn luôn là phần của tài liệu mà phương pháp này được sử dụng.