Phương thức insertAdjacentHTML trong JavaScript

Bùi Tấn Lực
1053
21/09/2025

Chức năng của Phương thức insertAdjacentHTML trong JavaScript

Phương thức insertAdjacentHTML trong JavaScript dùng để chèn chuỗi HTML vào trước một phần tử HTML, chèn chuỗi HTML vào sau một phần tử HTML, chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha, chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha.

Cú pháp của Phương thức insertAdjacentHTML trong JavaScript

phantuhtml.insertAdjacentHTML(vitrichen, chuoihtml);

phantuhtml: Phần tử HTML.

vitrichen: Vị trí chèn,

chuoihtml: Chuỗi HTML cần chèn.

Vị trí chèn gồm 4 vị trí:

beforebegin: Chèn chuỗi HTML vào trước một phần tử HTML.

afterend: Chèn chuỗi HTML vào sau một phần tử HTML.

afterbegin: Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha.

beforeend: Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha.

Code Phương thức insertAdjacentHTML trong JavaScript

Phương thức insertAdjacentHTML beforebegin trong JavaScript

Chèn chuỗi HTML vào trước một phần tử HTML, ở ví dụ này mình thêm thẻ p trước thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:

prett.insertAdjacentHTML('beforebegin', noiDungHtml);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML beforebegin trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertAdjacentHTML beforebegin trong JavaScript</h1>
<p>Chèn chuỗi HTML vào trước một phần tử HTML, ở ví dụ này mình thêm thẻ p trước thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:</p>
<div id="divid">
    <pre><code>insertAdjacentHTML beforebegin</code></pre>
    <pre><code>insertAdjacentHTML beforebegin</code></pre>
    <pre><code>insertAdjacentHTML beforebegin</code></pre>
    <pre><code>insertAdjacentHTML beforebegin</code></pre>
</div>
<script>
// Lấy nút phần tử id divid
const divid = document.getElementById('divid');
if(divid){
// Lấy danh sách phần tử HTML pre trong phần tử id divid
const pres = divid.getElementsByTagName('pre');
// Lặp qua từng phần tử HTML pre trong phần tử id divid
for (let i = 0; i < pres.length; i++) {
// Tạo phần tử HTML p
const noiDungHtml = "<p>Copy</p>";
// Lấy thẻ pre cần thêm
const prett = divid.getElementsByTagName("pre")[i];
if(prett){
    // Thêm thẻ p vào phía trước thẻ pre
	prett.insertAdjacentHTML('beforebegin', noiDungHtml);
}		  
}
}
</script>
</body>
</html>

Kết quả:

Copy
insertAdjacentHTML beforebegin

Copy
insertAdjacentHTML beforebegin

Copy
insertAdjacentHTML beforebegin

Copy
insertAdjacentHTML beforebegin

Chạy Thử

Phương thức insertAdjacentHTML afterend trong JavaScript

Chèn chuỗi HTML vào sau một phần tử HTML, ở ví dụ này mình thêm thẻ p sau thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:

prett.insertAdjacentHTML('afterend', noiDungHtml);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML afterend trong JavaScript</title>
</head>
<body>
<h1>Phương thức insertAdjacentHTML afterend trong JavaScript</h1>
<p>Chèn chuỗi HTML vào sau một phần tử HTML, ở ví dụ này mình thêm thẻ p sau thẻ pre, thẻ p chứa chữ copy để copy nội dung thẻ pre:</p>
<div id="divid">
    <pre><code>insertAdjacentHTML afterend</code></pre>
    <pre><code>insertAdjacentHTML afterend</code></pre>
    <pre><code>insertAdjacentHTML afterend</code></pre>
    <pre><code>insertAdjacentHTML afterend</code></pre>
</div>
<script>
// Lấy nút phần tử id divid
const divid = document.getElementById('divid');
if(divid){
// Lấy danh sách phần tử HTML pre trong phần tử id divid
const pres = divid.getElementsByTagName('pre');
// Lặp qua từng phần tử HTML pre trong phần tử id divid
for (let i = 0; i < pres.length; i++) {
// Tạo phần tử HTML p
const noiDungHtml = "<p>Copy</p>";
// Lấy thẻ pre cần thêm
const prett = divid.getElementsByTagName("pre")[i];
if(prett){
    // Thêm thẻ p vào phía sau thẻ pre
	prett.insertAdjacentHTML('afterend', noiDungHtml);
}		  
}
}
</script>
</body>
</html>

Kết quả:

insertAdjacentHTML afterend
Copy

insertAdjacentHTML afterend
Copy

insertAdjacentHTML afterend
Copy

insertAdjacentHTML afterend
Copy

Chạy Thử

Phương thức insertAdjacentHTML afterbegin trong JavaScript

Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha:

divid.insertAdjacentHTML("afterbegin", chuoihtml);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML afterbegin trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertAdjacentHTML afterbegin trong JavaScript</h1>
<p>Chèn chuỗi HTML vào trước các phần tử con của một phần tử HTML cha:</p>
<div id="divid" style="border:1px solid red; padding:10px; margin-bottom:10px">
    <p>Thẻ p 1</p>
    <p>Thẻ p 2</p>
    <p>Thẻ p 3</p>
</div>
<button onclick="myFunction()">CHÈN</button>
<p>Click "CHÈN" để chèn chuỗi HTML thẻ p màu đỏ vào trước các phần tử con của thẻ div màu đỏ</p>
<script>
function myFunction() {
  // lấy id cần chèn
  const divid = document.getElementById("divid");
  // tạo chuỗi html cần chèn
  let chuoihtml = "<p style='color:red' >Thẻ p mới thêm</p>";
  // chèn chuỗi html vào trước các phần tử con của thẻ div có id bằng divid
  divid.insertAdjacentHTML("afterbegin", chuoihtml);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentHTML beforeend trong JavaScript

Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha:

divid.insertAdjacentHTML("beforeend", chuoihtml);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentHTML beforeend trong JavaScript</title>
</head>
<body>

<h1>Phương thức insertAdjacentHTML beforeend trong JavaScript</h1>
<p>Chèn chuỗi HTML vào sau các phần tử con của một phần tử HTML cha:</p>
<div id="divid" style="border:1px solid red; padding:10px; margin-bottom:10px">
    <p>Thẻ p 1</p>
    <p>Thẻ p 2</p>
    <p>Thẻ p 3</p>
</div>
<button onclick="myFunction()">CHÈN</button>
<p>Click "CHÈN" để chèn chuỗi HTML thẻ p màu đỏ vào sau các phần tử con của thẻ div màu đỏ</p>
<script>
function myFunction() {
  // lấy id cần chèn
  const divid = document.getElementById("divid");
  // tạo chuỗi html cần chèn
  let chuoihtml = "<p style='color:red' >Thẻ p mới thêm</p>";
  // chèn chuỗi html vào sau các phần tử con của thẻ div có id bằng divid
  divid.insertAdjacentHTML("beforeend", chuoihtml);
}
</script>
</body>
</html>

Chạy Thử

Cách sử dụng insertAdjacentHTML hiệu quả trong thực tế

insertAdjacentHTML() phù hợp khi cần chèn một đoạn HTML vào vị trí xác định mà không phải xây dựng từng phần tử DOM bằng nhiều thao tác riêng lẻ. Tuy nhiên, để sử dụng hiệu quả, nên chọn đúng tình huống và kiểm soát nội dung được đưa vào phương thức này.

Khi nào nên dùng insertAdjacentHTML?

Phương thức này đặc biệt hữu ích khi nội dung cần thêm đã có sẵn dưới dạng chuỗi HTML, chẳng hạn như tạo một thông báo, thêm một dòng vào danh sách hoặc dựng nhanh một khối giao diện từ dữ liệu JavaScript.

const list = document.querySelector("#list");

list.insertAdjacentHTML(
  "beforeend",
  "<li>Sản phẩm mới</li>"
);

Điểm đáng chú ý là phần tử đang tồn tại không bị thay thế. JavaScript chỉ đưa phần HTML mới vào đúng vị trí được chỉ định, nhờ đó những nội dung hoặc trạng thái khác bên trong phần tử có thể được giữ nguyên.

Đây cũng là lựa chọn thuận tiện khi cần thêm nhiều phần tử cùng lúc thay vì tạo từng node rồi thiết lập thuộc tính và nội dung cho từng node.

Những lưu ý khi chèn HTML bằng insertAdjacentHTML

Không nên đưa trực tiếp dữ liệu chưa được kiểm soát từ người dùng vào chuỗi HTML. Nếu dữ liệu chứa mã HTML hoặc JavaScript nguy hiểm, việc chèn trực tiếp có thể tạo ra lỗ hổng XSS.

const name = userInput;

element.insertAdjacentHTML(
  "beforeend",
  `<p>Xin chào ${name}</p>`
);

Với dữ liệu không đáng tin cậy, cần xử lý hoặc lọc dữ liệu trước khi đưa vào HTML. Nếu chỉ cần hiển thị văn bản thuần túy, có thể ưu tiên textContent thay vì biến dữ liệu thành một đoạn HTML.

Ngoài ra, chuỗi HTML càng phức tạp thì càng khó kiểm soát khi bảo trì. Với giao diện có nhiều logic, thuộc tính hoặc sự kiện động, việc thao tác trực tiếp với các phần tử DOM có thể rõ ràng hơn.

So sánh insertAdjacentHTML với innerHTML và các phương thức DOM khác

Phương thức	Điểm nổi bật	Phù hợp khi
insertAdjacentHTML()	Chèn HTML vào vị trí cụ thể mà không cần thay toàn bộ nội dung phần tử	Cần thêm nhanh một hoặc nhiều đoạn HTML
innerHTML	Đọc hoặc thay thế nội dung HTML bên trong phần tử	Cần thiết lập lại toàn bộ nội dung bên trong
textContent	Đưa nội dung vào dưới dạng văn bản	Chỉ cần hiển thị dữ liệu và không cần HTML
createElement()	Tạo và thao tác từng phần tử DOM bằng JavaScript	Cần kiểm soát chi tiết cấu trúc và thuộc tính của phần tử

Vì vậy, không có phương thức nào luôn tốt hơn các phương thức còn lại. insertAdjacentHTML() phát huy hiệu quả khi cấu trúc HTML đã tương đối rõ ràng và cần chèn vào một vị trí cụ thể. Nếu dữ liệu chỉ là văn bản, textContent thường an toàn và đơn giản hơn; còn khi cần kiểm soát từng node, createElement() sẽ phù hợp hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức insertAdjacentHTML trong JavaScript.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức insertAdjacentHTML 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

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !