Thuộc tính innerHTML của HTML DOM Element

Đị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:

Thuộc tính innerText

Thuộc tính textContent

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;

Thử ngay

Ví dụ 2

Thay đổi nội dung HTML của yếu tố có id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Thử ngay

Ví dụ 3

Lấy nội dung HTML của yếu tố <ul> có id="myList":

let html = document.getElementById("myList").innerHTML;

Thử ngay

Ví dụ 4

Xóa nội dung HTML của yếu tố <p> có id="demo":

element.innerHTML = "";

Thử ngay

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;

Thử ngay

Ví dụ 6

Lặp lại nội dung HTML của phần tử:

element.innerHTML += element.innerHTML;

Thử ngay

Ví dụ 7

Thay đổi nội dung HTML và URL của liên kết:

element.innerHTML = "W3School";
element.href = "";

Thử ngay

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;

Thử ngay

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ợ