Thuộc tính innerText trong JavaScript

• Bùi Tấn Lực
• 1022
• 11/09/2025

Chức năng của Thuộc tính innerText trong JavaScript

Thuộc tính innerText trong JavaScript dùng để lấy những chữ có trong thẻ HTML, nó không lấy các thẻ html mà chỉ lấy chữ ở trong đó, nếu thẻ html có css none thì nó không lấy chữ trong thẻ đó.

innerText còn có chức năng nhúng nội dung được lấy vào một thẻ HTML khác, lúc nhúng nó nhúng được cả các thẻ html và chữ được lấy nhưng thẻ HTML sẽ không hoạt động như một HTML mà hoạt động như một chữ.

Cú pháp của Thuộc tính innerText trong JavaScript

Nhúng nội dung:

tenbien.innerText = 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.

Lấy nội dung:

let ketqua = tenbien.innerText;

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ề.

Code Thuộc tính innerText trong JavaScript

document.getElementById("tuoihai").innerText;

document.getElementById("ketqua").innerText = tuoi;

<h2>Nhúng nội dung</h2>
<div id="tuoi">Năm nay bạn 35 <span style="display:none">tuổi!</span></div>
<div id="ketqua"></div>


<h2>Lấy nội dung</h2>
<div id="tuoihai">Năm nay bạn 35 <span style="display:none">tuổi!</span></div>
<textarea id="ketquahai"></textarea>

<script>
// innerHTML lấy html
let tuoi = document.getElementById("tuoi").innerHTML;
// innerText Nhúng html đã lấy về id ketqua
document.getElementById("ketqua").innerText = tuoi;

// innerText lấy html
let tuoihai = document.getElementById("tuoihai").innerText;
// innerText Nhúng text đã lấy về
document.getElementById("ketquahai").innerText = tuoihai;
</script>

Chạy Thử

So sánh innerText với textContent và innerHTML trong JavaScript

Khi làm việc với nội dung của một phần tử HTML, innerText, textContent và innerHTML có cách xử lý khác nhau. Chọn đúng thuộc tính giúp mã JavaScript dễ kiểm soát hơn, đặc biệt khi trang có nội dung ẩn hoặc chứa nhiều phần tử con.

innerText khác textContent như thế nào?

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 giao diện, nên kết quả có thể chịu ảnh hưởng bởi CSS và cách trình duyệt hiển thị nội dung. Trong khi đó, textContent lấy văn bản từ cây DOM mà không quan tâm nội dung đó đang được hiển thị hay ẩn.

Vì vậy, nếu mục tiêu là lấy nội dung gần với những gì người dùng đang đọc, innerText thường phù hợp hơn. Ngược lại, textContent hữu ích khi cần lấy toàn bộ văn bản của phần tử mà không muốn phụ thuộc vào trạng thái hiển thị.

Khi nào nên dùng innerText thay vì innerHTML?

Hãy dùng innerText khi chỉ cần đọc hoặc thay đổi nội dung dạng văn bản và không có nhu cầu xử lý cấu trúc HTML bên trong phần tử. Cách này đặc biệt phù hợp với tiêu đề, thông báo, nhãn hoặc nội dung được hiển thị trực tiếp cho người dùng.

Ngược lại, innerHTML được dùng khi cần làm việc với cả mã HTML bên trong phần tử, chẳng hạn đọc các phần tử con hoặc thay thế một đoạn nội dung gồm nhiều thẻ HTML. Nếu dữ liệu được đưa vào innerHTML đến từ người dùng hoặc nguồn không đáng tin cậy, cần xử lý dữ liệu cẩn thận để tránh tạo ra lỗ hổng bảo mật.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính innerText trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính innerText trong JavaScript
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 *

Bình luận, Hỏi đáp