Thuộc tính outerHTML trong JavaScript

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

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

Thuộc tính outerHTML trong JavaScript dùng để lấy nội dung của thẻ HTML và lấy luôn thẻ HTML đó, dùng để nhúng nội dung vào thẻ HTML và thay thế luôn phần tử HTML hiện tại.

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

Lấy nội dung:

let ketqua = tenbien.outerHTML;

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ề những gì có trong phần tử HTML đó, bao gồm thẻ html, thuộc tính, giá trị, nội dung chữ,....

Nhúng nội dung:

tenbien.outerHTML = "noidung";

tenbien: Tên biến là phần tử HTML cần nhúng nội dung vào, thường dùng document.getElementById("giá trị id") để lấy.

noidung: Nội dung khi được nhúng nếu có thẻ HTML thì sẽ có chức năng như một thẻ html bình thường và thay thế luôn phần tử HTML hiện tại.

Code Thuộc tính outerHTML trong JavaScript

Thuộc tính outerHTML lấy nội dung trong JavaScript

let ulid = document.getElementById("ulid").outerHTML;

<ul id="ulid">
 <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>
<script>
function layNoiDung() {
let ulid = document.getElementById("ulid").outerHTML;
alert(ulid);
}
</script>

Kết quả sau khi nhấn nút "Lấy Nội Dung":

<ul id="ulid">
 <li>Trang chủ</li>
 <li>Giới thiệu</li>
 <li>Blog</li>
 <li>Liên hệ</li>
</ul>

Chạy Thử

Thuộc tính outerHTML nhúng nội dung trong JavaScript

document.getElementById("h2id").outerHTML = "<h3>Nội dung mới!</h3>";

<h2 id="h2id">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>
<script>
function nhungNoiDung() {
let h2id = document.getElementById("h2id");
h2id.outerHTML = "<h3>Nội dung mới!</h3>";
}
</script>

Kết quả:

<h2 id="h2id">Nội dung cần thay</h2>

thay thế bằng:

<h3>Nội dung mới!</h3>

Chạy Thử

Những lưu ý khi sử dụng outerHTML trong JavaScript

outerHTML rất hữu ích khi cần đọc hoặc thay đổi toàn bộ phần tử, nhưng cách sử dụng không đúng có thể làm mất phần tử đang thao tác hoặc tạo ra rủi ro khi xử lý dữ liệu động. Hiểu rõ các điểm cần lưu ý sẽ giúp mã JavaScript ổn định và dễ kiểm soát hơn.

outerHTML có thể thay thế hoàn toàn phần tử HTML

Khi gán giá trị mới cho outerHTML, JavaScript không chỉ thay đổi nội dung bên trong mà còn thay thế chính phần tử đang được chọn bằng chuỗi HTML mới.

Chẳng hạn, đoạn mã sau sẽ thay thế phần tử div ban đầu bằng một phần tử p:

const box = document.querySelector('.box');

box.outerHTML = '<p class="message">Nội dung mới</p>';

Sau khi thực thi, phần tử div không còn tồn tại trong DOM tại vị trí cũ. Vì vậy, nếu vẫn cần thao tác với phần tử mới, nên lấy lại phần tử từ DOM thay vì tiếp tục sử dụng tham chiếu cũ.

Rủi ro khi chèn nội dung động bằng outerHTML

Không nên đưa dữ liệu do người dùng nhập trực tiếp vào outerHTML nếu chưa được kiểm soát. Việc chèn chuỗi HTML không đáng tin cậy có thể làm xuất hiện nội dung ngoài ý muốn và tạo ra lỗ hổng bảo mật.

Đặc biệt, cần thận trọng khi dữ liệu được lấy từ biểu mẫu, URL hoặc nguồn bên ngoài. Với nội dung chỉ cần hiển thị dưới dạng văn bản, nên ưu tiên các phương thức xử lý văn bản thay vì biến dữ liệu thành HTML.

Khi nào nên dùng outerHTML và khi nào nên dùng innerHTML

Nên dùng outerHTML khi mục tiêu là đọc hoặc thay thế toàn bộ phần tử, bao gồm cả thẻ bao quanh nó. Ngược lại, innerHTML phù hợp hơn khi chỉ cần đọc hoặc thay đổi nội dung bên trong phần tử hiện tại.

Ví dụ, nếu muốn thay toàn bộ cấu trúc của một phần tử:

element.outerHTML = '<div class="new-box">Nội dung mới</div>';

Nếu chỉ muốn thay phần nội dung bên trong mà vẫn giữ nguyên phần tử hiện tại:

element.innerHTML = '<span>Nội dung mới</span>';

Việc chọn đúng thuộc tính giúp hạn chế thay đổi DOM ngoài ý muốn và làm mã JavaScript dễ bảo trì hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outerHTML 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 outerHTML 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