Internalhtml làm gì trong html?

innerHTML là thuộc tính của bất kỳ phần tử HTML nào có giá trị cho nội dung nằm giữa thẻ mở và thẻ kết thúc

Trong ví dụ bên dưới, InternalHTML có giá trị "a text"

a text

Nó được sử dụng để lấy hoặc chèn nội dung động vào một trang. Ngoài việc chèn văn bản đơn giản, có thể có sự khác biệt trong hoạt động của nó trong trình duyệt

Nó được triển khai lần đầu tiên trong Internet Explorer 5 và sau đó được mọi trình duyệt chọn. Kể từ HTML 5, nó là một phần của tiêu chuẩn và hiện là thuộc tính của HTMLElement và HTMLDocument

Sử dụng InternalHTML

Đây là một đoạn văn đơn giản

  a text.

Chúng ta có thể lấy nội dung của đoạn văn bằng đoạn mã này

var x = document.getElementById("pid");
alert(x.innerHTML); 

Chúng ta có thể tự động thay thế nội dung của đoạn bằng mã này

var x = document.getElementById("pid");
x.innerHTML = "another text";

Trình diễn dưới đây

một văn bản

Đoạn chứa "văn bản" ở đầu được thay thế bằng "văn bản khác" khi bạn nhấp vào nút

Do đó, có thể thay thế nội dung của bất kỳ thẻ nào và chèn mã phức tạp hơn một chuỗi đơn giản, với các thẻ lồng nhau

trình diễn. Chèn nội dung động vào một trang

Trong phần minh họa, bạn có thể chèn hình ảnh vào trang bằng cách chèn

Mã HTML

Your content
   
To be inserted here .
   

Mã JavaScript

HTML5

HTML 5 chuẩn hóa hai thuộc tính mới, innerHTML và outsideHTML

Hai thuộc tính được sử dụng để đọc nội dung của thẻ hoặc toàn bộ tài liệu. Họ có thể thay thế nội dung của thẻ hoặc thêm nội dung mới

Sự khác biệt giữa InternalHTML và OuterHTML

Thuộc tính outsideHTML giống như innerHTML áp dụng cho một phần tử trang, một thẻ. Nhưng outsideHTML đại diện cho cả phần tử và nội dung của nó, trong khi innerHTML chỉ đại diện cho nội dung

HTML bên ngoài có thể được sử dụng để trả về nội dung của toàn bộ tài liệu nhưng không thay thế toàn bộ tài liệu.
Rõ ràng hơn, chúng ta có thể viết tài liệu. innerHTML="" chứ không phải tài liệu. bên ngoàiHTML = "".

Phương pháp tương đương DOM

Chúng ta có thể giải quyết các vấn đề về tính tương thích bằng cách sử dụng các phương pháp để thao tác Mô hình Đối tượng Tài liệu

Tạo một phần tử, một hình ảnh chẳng hạn

var x = document.createElement('img');

Gán các thuộc tính, trong trường hợp này, vì đó là một hình ảnh, một URL tới nguồn

x.src="https://www.xul.fr/images/maurice.jpg";  

Đính kèm mã mới vào thẻ hiện có

Mã này được chèn vào trang. Kết quả

mã hoàn chỉnh

Để chèn một văn bản, chúng tôi sử dụng một phương pháp khác

  a text.

Và để tích hợp nhiều phần tử lồng nhau, chúng tôi sử dụng appendChild, trên phần tử gốc, để thêm phần tử con đầu tiên hoặc nhiều phần tử hoặc cho phần tử con

Ví dụ này sử dụng thuộc tính innerHTML để thay đổi văn bản của đoạn văn khi xảy ra sự kiện onmouseover. Văn bản bị ảnh hưởng và bất kỳ thẻ nào trong đó được thay đổi bởi các sự kiện onmouseover và onmouseout

  a text.

Xem ví dụ trực tiếp

Ví dụ này sử dụng thuộc tính InternalHTML để chèn tập lệnh vào trang

  a text.

Xem ví dụ trực tiếp

Ví dụ sau minh họa cách chuyển đổi nguồn HTML thành văn bản bằng cách sử dụng phần tử div tạm thời và createTextNode. Sau khi HTML được làm sạch, nó có thể được chèn vào tài liệu một cách an toàn bằng cách sử dụng InternalHTML

  a text.

Xem ví dụ trực tiếp

ghi chú

Nhận xét

Thuộc tính innerHTML hợp lệ cho cả phần tử khối và nội tuyến. Theo định nghĩa, các phần tử không có cả thẻ mở và thẻ đóng không thể có thuộc tính InternalHTML. Thuộc tính InternalHTML lấy một chuỗi chỉ định sự kết hợp hợp lệ giữa văn bản và các phần tử. Khi thuộc tính innerHTML được đặt, chuỗi đã cho sẽ thay thế hoàn toàn nội dung hiện có của đối tượng. Nếu chuỗi chứa thẻ HTML, chuỗi sẽ được phân tích cú pháp và định dạng khi được đặt vào tài liệu. Thuộc tính này có thể truy cập được trong thời gian chạy khi tài liệu đang được phân tích cú pháp; . Khi sử dụng InternalHTML để chèn tập lệnh, bạn phải bao gồm thuộc tính DEFER trong phần tử tập lệnh. Thuộc tính innerHTML chỉ đọc trên các đối tượng col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title và tr. Bạn có thể thay đổi giá trị của phần tử tiêu đề bằng Tài liệu. tài sản tiêu đề. Để thay đổi nội dung của các phần tử bảng, tFoot, tHead và tr, hãy sử dụng mô hình đối tượng bảng được mô tả trong Building Tables Dynamically. Tuy nhiên, để thay đổi nội dung của một ô cụ thể, bạn có thể sử dụng InternalHTML

**Cảnh báo an ninh. ** Việc xử lý thuộc tính InternalHTML không đúng cách có thể kích hoạt các cuộc tấn công chèn tập lệnh. Khi chấp nhận văn bản từ một nguồn không đáng tin cậy (chẳng hạn như chuỗi truy vấn của URL), hãy sử dụng createTextNode để chuyển đổi HTML thành văn bản và nối phần tử vào tài liệu bằng cách sử dụng appendChild. Tham khảo phần Ví dụ bên dưới để biết thêm thông tin. Để duy trì khả năng tương thích với các phiên bản trước của Windows Internet Explorer, thuộc tính này áp dụng cho đối tượng textArea. Tuy nhiên, thuộc tính chỉ hoạt động với các chuỗi không chứa thẻ. Với một chuỗi chứa thẻ, thuộc tính này trả về lỗi. Tốt hơn là sử dụng thuộc tính InternalText với đối tượng này

Mục đích chính của InternalHTML là gì?

Làm cách nào để viết mã HTML trong InternalHTML?

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

Sự khác biệt giữa InternalHTML và văn bản bên trong là gì?