Thuộc tính innerHTML của HTML DOM Element
- Trang trước id
- Trang tiếp theo innerText
- Quay lại lớp trên Đối tượng Elements HTML DOM
Định nghĩa và cách sử dụng
innerHTML
Thuộc tính thiết lập hoặc trả về nội dung HTML của yếu tố (HTML nội bộ).
Xem thêm:
Mẫu
Ví dụ 1
Lấy nội dung HTML của yếu tố có id="myP":
let html = document.getElementById("myP").innerHTML;
Ví dụ 2
Thay đổi nội dung HTML của yếu tố có id="demo":
document.getElementById("demo").innerHTML = "I have changed!";
Ví dụ 3
Lấy nội dung HTML của yếu tố <ul> có id="myList":
let html = document.getElementById("myList").innerHTML;
Ví dụ 4
Xóa nội dung HTML của yếu tố <p> có id="demo":
element.innerHTML = "";
Ví dụ 5
Thay đổi nội dung HTML của hai yếu tố:
let text = "Hello Dolly."; document.getElementById("myP").innerHTML = text; document.getElementById("myDIV").innerHTML = text;
Ví dụ 6
Lặp lại nội dung HTML của phần tử:
element.innerHTML += element.innerHTML;
Ví dụ 7
Thay đổi nội dung HTML và URL của liên kết:
element.innerHTML = "W3School"; element.href = "";
Cú pháp
Trả về thuộc tính innerHTML:
element.innerHTML
Đặt thuộc tính innerHTML:
element.innerHTML = text
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
Chuỗi. | Nội dung HTML. |
Giá trị trả về
Loại | Mô tả |
---|---|
Chuỗi | Nội dung HTML của phần tử. |
Sự khác biệt giữa innerHTML, innerText và textContent
Thuộc tính innerText trả về:
Chỉ trả về nội dung văn bản của phần tử và tất cả các phần tử con, không có khoảng trống ẩn CSS và các thẻ, trừ các phần tử <script> và <style>.
Thuộc tính innerHTML trả về:
Nội dung văn bản của phần tử, bao gồm tất cả khoảng trống và các thẻ HTML nội bộ.
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 phần tử con, bao gồm khoảng trống và văn bản ẩn CSS, nhưng không có thẻ.
Mô hình HTML
<p id="myP"> Element này có khoảng cách thêm và chứa <span> một phần tử span</span>.</p>
Mẫu JavaScript
let text = document.getElementById("myP").innerText; let text = document.getElementById("myP").innerHTML; let text = document.getElementById("demo").textContent;
Trong ví dụ trên:
Thuộc tính innerText trả về:
Element này có khoảng cách thêm và chứa một phần tử span.
Thuộc tính innerHTML trả về:
Element này có khoảng cách thêm và chứa <span> một phần tử span</span>.
Thuộc tính textContent trả về:
Element này có khoảng cách thêm và chứa một phần tử span.
Trình duyệt hỗ trợ
Tất cả các trình duyệt đều hỗ trợ element.innerHTML
:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |
- Trang trước id
- Trang tiếp theo innerText
- Quay lại lớp trên Đối tượng Elements HTML DOM