Thuộc tính outerHTML trong JavaScript

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

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

Thuộc tính outerHTML trong JavaScript

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ử

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

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 *

Đă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