Thuộc tính outerText trong JavaScript
Bùi Tấn Lực - 899
- 11/09/2025
Chức năng của Thuộc tính outerText trong JavaScript
Thuộc tính outerText trong JavaScript dùng để nhúng nội dung vào thẻ HTML, nếu có thẻ HTML trong nội dung cần nhúng thì thẻ HTML sẽ hiện như chữ, đồng thời cũng thay thể phần tử HTML được nhúng.
Dùng để lấy chữ trong một thẻ HTML, các thẻ HTML trong đó sẽ bị loại bỏ và chỉ lấy phần chữ.
Cú pháp của Thuộc tính outerText trong JavaScript
Lấy nội dung:
let ketqua = tenbien.outerText;
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ả sẽ lấy toàn bộ chữ có trong phần tử và loại bỏ thẻ HTML.
Nhúng nội dung:
tenbien.outerText = "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 là chữ và thẻ html, khi nhúng vào phần tử HTML thì những thẻ HTML được nhúng sẽ hiện ra như chữ, và nội dung này theo thế luôn phần tử HTML hiện tại.
Code Thuộc tính outerText trong JavaScript
Thuộc tính outerText lấy nội dung trong JavaScript
let ulid = document.getElementById("ulid").outerText;
<ul id="ulid" style="border:1px solid red;padding:20px">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Blog</li>
<li>Liên hệ</li>
</ul>
<p>Click vào nút "Lấy Nội Dung" để xem nội dung thẻ ul được lấy</p>
<button onclick="layNoiDung()">Lấy Nội Dung</button>
<div id="divid" style="border:1px solid red;padding:20px;margin-top:10px">Nội dung chữ cần lấy!</div>
<p>Click vào nút "Lấy Nội Dung Chữ" để xem nội dung chữ</p>
<button onclick="layNoiDungChu()">Lấy Nội Dung Chữ</button>
<script>
function layNoiDung() {
let ulid = document.getElementById("ulid").outerText;
alert(ulid);
}
function layNoiDungChu() {
let divid = document.getElementById("divid").outerText;
alert(divid);
}
</script>
Kết quả lấy nội dung thẻ ul có html:
Trang chủ
Giới thiệu
Blog
Liên hệ
Kết quả lấy nội dung chữ:
Nội dung chữ cần lấy!
Thuộc tính outerText nhúng nội dung trong JavaScript
document.getElementById("h1id").outerText = "<h3>Nội dung mới!</h3>";
<h2 id="h1id">Nội dung cần thay</h2>
<p>Click vào nút "Nhúng Nội Dung" để thay thế nội dung mới và để thay thế phần tử HTML hiện tại (cụ thể thay thế phần tử h2)</p>
<button onclick="nhungNoiDung()">Nhúng Nội Dung</button>
<h2 id="h2id">Nội dung chữ cần thay</h2><br>
<p>Click vào nút "Nhúng Nội Dung Chữ" để thay thế nội dung mới và để thay thế phần tử HTML hiện tại (cụ thể thay thế phần tử h2)</p>
<button onclick="nhungNoiDungChu()">Nhúng Nội Dung Chữ</button>
<script>
function nhungNoiDung() {
let h1id = document.getElementById("h1id");
h1id.outerText = "<h3>Nội dung mới!</h3>";
}
function nhungNoiDungChu() {
let h2id = document.getElementById("h2id");
h2id.outerText = "Nội dung chữ mới!";
}
</script>
Kết quả nhúng có thẻ html trong đó, thẻ html cũng hiện ra như chữ:
<h3>Nội dung mới!</h3>
Kết quả khi nhúng chữ không:
Nội dung chữ mới!
So sánh outerText với innerText, textContent và innerHTML trong JavaScript
Khi thao tác với nội dung của phần tử HTML, JavaScript cung cấp nhiều thuộc tính có cách hoạt động khá giống nhau nhưng mục đích sử dụng lại khác biệt. Trong đó, outerText, innerText, textContent và innerHTML thường dễ bị nhầm lẫn.
Nắm rõ điểm khác nhau giữa các thuộc tính này giúp bạn chọn đúng phương pháp khi cần đọc nội dung, thay đổi văn bản hoặc cập nhật cấu trúc HTML của một phần tử.
outerText và innerText khác nhau như thế nào?
Cả outerText và innerText đều làm việc với nội dung văn bản hiển thị của phần tử. Tuy nhiên, điểm khác biệt quan trọng nằm ở cách xử lý khi bạn gán giá trị mới.
Với innerText, giá trị mới được đưa vào bên trong phần tử hiện tại. Ngược lại, khi gán cho outerText, phần tử đang được thao tác có thể bị thay thế bằng nội dung văn bản mới.
const element = document.querySelector(".content");
element.innerText = "Nội dung mới";
Trong trường hợp trên, phần tử vẫn được giữ lại và nội dung bên trong được thay đổi. Với outerText, cách hoạt động khi gán giá trị có thể làm thay đổi chính phần tử đang được chọn.
outerText và textContent khác nhau như thế nào?
textContent tập trung vào toàn bộ nội dung văn bản nằm trong phần tử, không phụ thuộc trực tiếp vào việc nội dung đó có đang được hiển thị trên giao diện hay không. Đây là điểm khác biệt đáng chú ý so với outerText, vốn gắn với cách trình duyệt biểu diễn văn bản của phần tử.
Ví dụ, một phần tử chứa nội dung bị ẩn bằng CSS vẫn có thể được lấy văn bản thông qua textContent. Vì vậy, thuộc tính này thường phù hợp khi bạn cần đọc dữ liệu văn bản thuần từ DOM mà không quan tâm đến trạng thái hiển thị.
const element = document.querySelector(".content");
console.log(element.textContent);
Trong khi đó, outerText phù hợp hơn với những tình huống cần làm việc theo nội dung văn bản mà phần tử thể hiện trong tài liệu.
outerText và innerHTML khác nhau như thế nào?
Điểm khác biệt dễ nhận thấy nhất là outerText làm việc với văn bản, còn innerHTML cho phép đọc hoặc thay đổi cả phần mã HTML nằm bên trong phần tử.
Chẳng hạn, nếu một phần tử chứa đoạn văn có thẻ strong, innerHTML có thể lấy cả phần đánh dấu HTML đó, trong khi outerText chỉ hướng đến nội dung văn bản.
const element = document.querySelector(".content");
console.log(element.innerHTML);
Khi cần chèn một cấu trúc HTML mới, innerHTML thường phù hợp hơn. Ngược lại, nếu mục tiêu chỉ là xử lý nội dung văn bản thì không nên sử dụng innerHTML một cách không cần thiết.
Nên sử dụng outerText trong trường hợp nào?
outerText nên được cân nhắc khi bạn cần thao tác với phần văn bản đại diện cho một phần tử và đặc biệt cần lưu ý đến hành vi thay thế phần tử khi gán giá trị mới.
Nếu chỉ muốn thay đổi nội dung bên trong mà vẫn giữ nguyên phần tử DOM, innerText thường dễ hiểu hơn. Khi cần lấy văn bản bất kể trạng thái hiển thị, textContent là lựa chọn phù hợp. Còn khi phải đọc hoặc cập nhật cấu trúc HTML bên trong, innerHTML sẽ đáp ứng đúng mục đích hơn.
Do đó, không nên chọn outerText chỉ vì nó có thể thay đổi nội dung nhanh chóng. Hãy xác định rõ bạn đang cần xử lý văn bản hiển thị, toàn bộ văn bản hay mã HTML trước khi lựa chọn thuộc tính.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outerText 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 *
