công dụng của innerHTML hoặc Sữ dụng để làm gì ?

Dùng thuộc tính innerHTML để tạo nội dung động 


Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với thuộc tính innerHTML của các phần tử HTML. Thuộc tính innerHTML không phải là một chuẩn, đầu tiên nó được đưa ra trong Internet Explorer và sau đó xuất hiện trong nhiều trình duyệt khác. Nó đơn giản là một xâu kí tự biểu diễn nội dung giữa một thẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộc tính innerHTML. 

Ví dụ sau sẽ chỉ ra cách dùng hàm tìm kiếm sử dụng XMLHttpRequest, các thuộc tính responseText, và innerHTML của các phần tử HTML. Khi nhấn vào nút bấm sẽ khởi tạo một thao tác tìm kiếm trên server. Server sẽ trả về một bảng kết quả. Trình duyệt xử lí response bằng cách thiết lập thuộc tính innerHTML của phần tử div bằng giá trị của thuộc tính responseText của XMLHttpRequest. 

1. Khi nhấn vào nút tìm kiếm, sẽ gọi đến hàm startRequest, đầu tiên nó gọi đến hàm createXMLHttpRequest để tạo một thể hiện của XMLHttpRequest. 
2. Hàm startRequest thiết lập hàm callback với hàm handleStateChange. 
3. Hàm startRequest tiếp tục sử dụng phương thức open() để thiết lập phương thức yêu cầu (GET) và tài nguyên đích cũng như việc thực hiện yêu cầu không đồng bộ. 
4. Các yêu cầu sau đó được gửi bằng phương thức send() của XMLHttpRequest. 
5. Mỗi lần trạng thái nội tại của XMLHttpRequest thay đổi, hàm handleStateChange được gọi. Mỗi lần nhận một response (được chỉ báo bởi thuộc tính readyState có giá trị là 4), thuộc tính innerHTML của các phần tử div được thiết lập bằng thuộc tính responseText của XMLHttpRequest. 

Code ví dụ đây:
mình sữ dụng sự kiện onClick trên nút để thấy công dụng của innerHTML

<p id="demo1">Trước khí đổi</p>

// nhớ đặt 1 cái id hoặc class để sự kiện onClick biết là nó sẽ tác động vào đâu

<button type="button" onClick="document.getElementById('demo1').innerHTML='Chử sau khi đổi">click doi chu</button>