Phần tử DOM HTML bên trongHTML
Ví dụ
Lấy nội dung HTML của một phần tử có id="myP":
let html = document.getElementById("myP").innerHTML;
Hãy tự mình thử »Thay đổi nội dung HTML của một phần tử bằng id="demo":
document.getElementById("demo").innerHTML = "I have changed!";
Hãy tự mình thử »Lấy nội dung HTML của phần tử <ul> với id="myList":
let html = document.getElementById("myList").innerHTML;
Hãy tự mình thử »Xóa nội dung HTML của phần tử <p> bằng id="demo":
element.innerHTML = "";
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính innerHTML
đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử.
Sự khác biệt giữa
bên trongHTML, bên trong và văn bảnNội dung
Xem bên dưới
Cú pháp
Trả về thuộc tính bên trongHTML:
element .innerHTML
Đặt thuộc tính bên trongHTML:
element .innerHTML = text
Giá trị tài sản
Tài sản | Sự miêu tả |
Sợi dây | Nội dung HTML. |
Giá trị trả về
Kiểu | Sự miêu tả |
Sợi dây | Nội dung HTML của phần tử. |
Thêm ví dụ
Ví dụ
Thay đổi nội dung HTML của hai thành phần:
let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
Hãy tự mình thử »Ví dụ
Lặp lại nội dung HTML của một phần tử:
element.innerHTML += element.innerHTML;
Hãy tự mình thử »Ví dụ
Thay đổi nội dung HTML và URL của liên kết:
element.innerHTML = "W3Schools";
element.href = "https://www.example.com.vn";
Hãy tự mình thử » Sự khác biệt giữa
bên trongHTML, bên trong và văn bảnNội dung
Thuộc tính bên trongHTML trả về: Nội dung văn bản của phần tử, bao gồm tất cả các thẻ khoảng cách và thẻ HTML bên trong. |
Thuộc tính InnerText trả về: Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có khoảng cách và thẻ văn bản ẩn CSS, ngoại trừ các phần tử <script> và <style>. |
Thuộc tính textContent trả về: Nội dung văn bản của phần tử và tất cả các dòng con, có khoảng cách và văn bản ẩn CSS, nhưng không có thẻ. |
Ví dụ về HTML
<p id="myP"> This element has extra spacing and contains <span>a span
element</span>.</p>
Ví dụ về JavaScript
let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
Hãy tự mình thử »Trong ví dụ trên:
Thuộc tính InnerText trả về: Phần tử này có thêm khoảng cách và chứa phần tử span. |
Thuộc tính bên trongHTML trả về: Phần tử này có thêm khoảng cách và chứa <span>phần tử span</span>. |
Thuộc tính textContent trả về: Phần tử này có thêm khoảng cách và chứa phần tử span. |
Hỗ trợ trình duyệt
element.innerHTML
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |