Thuộc tính outerText trong JavaScript

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

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ữ, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính outerText trong JavaScript

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!

Chạy Thử

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!

Chạy Thử

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.

Bùi Tấn Lực

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

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn