Thuộc tính innerHTML trong JavaScript
Bùi Tấn Lực - 1163
- 11/09/2025
Chức năng của Thuộc tính innerHTML trong JavaScript
Thuộc tính innerHTML trong JavaScript dùng để lấy tất cả nội dung trong một phần tử HTML bao gồm cả: các thẻ HTML, chữ, thuộc tính, giá trị, thẻ html có css bằng none cũng lấy, chữ trong html có css bằng none cũng lấy... và có chức năng nhúng nội dung và một phần tử HTML khác, trong nội dung có thẻ HTML thì khi nhúng những thẻ HTML đó hoạt động như một thẻ HTML bình thường.
Cú pháp của Thuộc tính innerHTML trong JavaScript
Lấy nội dung:
let ketqua = tenbien.innerHTML;
tenbien: Tên biến là phần tử HTML cần lấy nội dung, thường dùng document.getElementById("giá trị id") để lấy.
ketqua: Kết quả trả về bao gồm cả thẻ html có css bằng none và chữ trong thẻ có css bằng none.
Nhúng nội dung:
tenbien.innerHTML = noidung;
tenbien: Tên biến là phần tử HTML cần nhúng nội dung, thường dùng document.getElementById("giá trị id") để lấy.
noidung: Nội dung dùng để nhúng vào phần tử HTML kia, nếu trong nội dung có thẻ HTML thì những thẻ HTML đó sẽ hoạt động như một thẻ HTML bình thường khi nhúng.
Code Thuộc tính innerHTML trong JavaScript
let tuoi = document.getElementById("tuoi").innerHTML;
document.getElementById("ketqua").innerHTML = tuoi;
<div id="tuoi">Năm nay bạn 35 <span>tuổi</span><span style="display:none">!</span></div>
<p><b>Xem Kết quả sau khi lấy về và sau khi nhúng chạy trực tiếp</b>:</p>
<textarea style="width:100%;" id="ketquahtml"></textarea>
<div id="ketqua"></div>
<script>
// lấy html
let tuoi = document.getElementById("tuoi").innerHTML;
// Nhúng html đã lấy về id ketqua
document.getElementById("ketquahtml").innerHTML = tuoi;
document.getElementById("ketqua").innerHTML = tuoi;
</script>
Kết quả:
35 tuổi!
Năm nay bạn: 35 tuổi!
So sánh innerHTML với innerText và textContent trong JavaScript
Khi cần lấy hoặc thay đổi nội dung của một phần tử HTML, innerHTML, innerText và textContent đều có thể được sử dụng nhưng cách xử lý dữ liệu của chúng không giống nhau. Hiểu rõ sự khác biệt giúp lựa chọn đúng thuộc tính và tránh tình trạng nội dung hiển thị không như mong muốn.
innerHTML và innerText khác nhau như thế nào?
innerHTML làm việc với cả nội dung HTML bên trong phần tử. Khi đọc dữ liệu, thuộc tính này có thể trả về các thẻ HTML; khi gán dữ liệu, trình duyệt có thể phân tích chuỗi và tạo ra các phần tử tương ứng.
Trong khi đó, innerText tập trung vào phần văn bản mà người dùng có thể nhìn thấy trên trang. Các thẻ HTML không được giữ lại dưới dạng mã HTML khi lấy nội dung bằng thuộc tính này.
<div id="demo"><strong>Web Mới</strong></div>
<script>
const element = document.getElementById("demo");
console.log(element.innerHTML);
console.log(element.innerText);
</script>
Với đoạn mã trên, innerHTML trả về nội dung có cả cấu trúc thẻ strong, còn innerText chỉ lấy phần chữ được hiển thị là “Web Mới”. Vì vậy, nếu mục đích là đọc hoặc tạo nội dung có định dạng HTML, innerHTML phù hợp hơn; nếu chỉ quan tâm đến văn bản hiển thị, innerText thường dễ sử dụng hơn.
innerHTML và textContent khác nhau như thế nào?
textContent lấy toàn bộ nội dung văn bản bên trong phần tử và không giữ lại cấu trúc HTML. Điểm đáng chú ý là textContent không chỉ giới hạn ở phần chữ đang hiển thị mà còn có thể lấy văn bản nằm trong những phần tử không được hiển thị trên giao diện.
Ngược lại, innerHTML bảo toàn cấu trúc HTML khi đọc nội dung. Khi gán một chuỗi có thẻ HTML cho innerHTML, trình duyệt sẽ xử lý chuỗi đó như HTML thay vì xem toàn bộ là văn bản thuần.
<div id="demo">
<p>Xin chào <strong>Web Mới</strong></p>
</div>
<script>
const element = document.getElementById("demo");
console.log(element.innerHTML);
console.log(element.textContent);
</script>
Trong trường hợp này, innerHTML cho biết cả cấu trúc bên trong phần tử, còn textContent chỉ tập trung vào phần văn bản. Đây là điểm khác biệt quan trọng khi xử lý dữ liệu để hiển thị, kiểm tra hoặc thao tác bằng JavaScript.
Nên sử dụng innerHTML, innerText hay textContent?
Không có thuộc tính nào luôn tốt hơn hai thuộc tính còn lại. Lựa chọn phụ thuộc vào loại dữ liệu cần xử lý.
- innerHTML: sử dụng khi cần đọc hoặc thay đổi nội dung có chứa cấu trúc HTML.
- innerText: phù hợp khi cần làm việc với phần văn bản được hiển thị trên giao diện.
- textContent: phù hợp khi cần lấy hoặc thay đổi văn bản thuần bên trong phần tử mà không quan tâm đến định dạng HTML.
Nếu chỉ cần thay đổi một đoạn chữ, textContent thường là lựa chọn rõ ràng và an toàn hơn. Khi cần tạo nội dung gồm các phần tử HTML, innerHTML mới phát huy đúng vai trò. Còn innerText hữu ích trong những tình huống mà kết quả cần phản ánh phần chữ thực sự được trình duyệt hiển thị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính innerHTML trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
