Phương thức insertAdjacentElement trong JavaScript

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

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

Phương thức insertAdjacentElement trong JavaScript dùng để di chuyển một phần tử HTML hoặc chèn một nút phần tử đến một vị trí so với một phần tử HTML khác hoặc các phần tử con của một phần tử HTML khác.

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

phantucung.insertAdjacentElement(vitri, phantudong);

phantucung: Phần tử cứng để cho phần tử động di chuyển hoặc chèn trước hay sau nó.

phantudong: Phần tử động di chuyển hoặc được chèn trước hay sau phần tử cứng.

vitri: Vị trí di chuyển hoặc chèn.

Vị trí di chuyển, chèn gồm 4 vị trí:

beforebegin: Di chuyển một phần tử HTML lên trước một phần tử HTML khác hoặc chèn một nút phần tử lên trước một phần tử HTML khác.

afterend: Di chuyển một phần tử HTML ra sau một phần tử HTML khác hoặc chèn một nút phần tử ra sau một phần tử HTML khác.

afterbegin: Di chuyển một phần tử HTML lên trước các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử lên trước các phần tử con của một phần tử HTML khác.

beforeend: Di chuyển một phần tử HTML ra sau các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử ra sau các phần tử con của một phần tử HTML khác.

Code Phương thức insertAdjacentElement trong JavaScript

Phương thức insertAdjacentElement beforebegin trong JavaScript

Di chuyển một phần tử HTML lên trước một phần tử HTML khác hoặc chèn một nút phần tử lên trước một phần tử HTML khác:

h1id.insertAdjacentElement("beforebegin", divid);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentElement beforebegin trong JavaScript</title>
</head>
<body>
<h1 id="h1id" style="color:red">H1- Phương thức insertAdjacentElement beforebegin trong JavaScript</h1>
<p>Di chuyển một phần tử HTML lên trước một phần tử HTML khác hoặc chèn một nút phần tử lên trước một phần tử HTML khác:</p>
<div id="divid" style="color:blue">
	Di chuyển thẻ này lên trước h1
</div>
<p>Click DI CHUYỂN để di chuyển dòng chữ xanh lên trước h1</p>
<button onclick="diChuyen()">DI CHUYỂN</button>

<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 mới tạo trước thẻ h1</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // Di chuyển phần tử phần tử div id divid lên trước h1
  h1id.insertAdjacentElement("beforebegin", divid);
}
function chenNut() {
    // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // Tạo nút phần tử h2
  const h2 = document.createElement('h2');
  h2.textContent = 'Thẻ h2';
  // Chèn nút phần tử h2 trước thẻ h1
  h1id.insertAdjacentElement("beforebegin", h2);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentElement afterend trong JavaScript

Di chuyển một phần tử HTML ra sau một phần tử HTML khác hoặc chèn một nút phần tử ra sau một phần tử HTML khác:

h1id.insertAdjacentElement("afterend", h2);

<!DOCTYPE html>
<html>
<head>
<title>Phương thức insertAdjacentElement afterend trong JavaScript</title>
</head>
<body>
<div id="divid" style="color:blue">
	Di chuyển thẻ này lên sau h1
</div>
<h1 id="h1id" style="color:red">H1- Phương thức insertAdjacentElement afterend trong JavaScript</h1>
<p>Di chuyển một phần tử HTML ra sau một phần tử HTML khác hoặc chèn một nút phần tử ra sau một phần tử HTML khác:</p>
<p>Click DI CHUYỂN để di chuyển dòng chữ xanh lên sau h1</p>
<button onclick="diChuyen()">DI CHUYỂN</button>

<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 mới tạo sau thẻ h1</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // Di chuyển phần tử phần tử div id divid lên sau h1
  h1id.insertAdjacentElement("afterend", divid);
}
function chenNut() {
    // Lấy phần tử h1 id h1id
  const h1id = document.getElementById("h1id");
  // Tạo nút phần tử h2
  const h2 = document.createElement('h2');
  h2.textContent = 'Thẻ h2';
  // Chèn nút phần tử h2 sau thẻ h1
  h1id.insertAdjacentElement("afterend", h2);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentElement afterbegin trong JavaScript

Di chuyển một phần tử HTML lên trước các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử lên trước các phần tử con của một phần tử HTML khác:

divid.insertAdjacentElement("afterbegin", pchen);

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

<h1>Phương thức insertAdjacentElement afterbegin trong JavaScript</h1>

<p>Di chuyển một phần tử HTML lên trước các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử lên trước các phần tử con của một phần tử HTML khác:</p>

<div id="divid" style="border:1px solid #ddd; padding:10px">
    <p>Thẻ p 1</p>
    <p>Thẻ p 2</p>
    <p>Thẻ p 3</p>
</div>
<p id="pchen" style="color:blue">Chèn thẻ này lên trước các phần tử con khung thẻ p</p>
<p>Click DI CHUYỂN để di chuyển dòng chữ màu xanh lên trước các phần tử con khung thẻ p</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 mới tạo trước các phần tử con khung thẻ p</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử p id pchen
  const pchen = document.getElementById("pchen");
  // Di chuyển phần tử pchen lên trước các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("afterbegin", pchen);
}
function chenNut() {
   // Lấy phần tử div id divid	
  const divid = document.getElementById("divid");
  // Tạo nút phần tử h2
  const h2 = document.createElement('h2');
  h2.textContent = 'Thẻ h2';
  // Chèn nút phần tử h2 trước các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("afterbegin", h2);
}
</script>
</body>
</html>

Chạy Thử

Phương thức insertAdjacentElement beforeend trong JavaScript

Di chuyển một phần tử HTML ra sau các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử ra sau các phần tử con của một phần tử HTML khác:

divid.insertAdjacentElement("beforeend", pchen);

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

<h1>Phương thức insertAdjacentElement beforeend trong JavaScript</h1>

<p>Di chuyển một phần tử HTML ra sau các phần tử con của một phần tử HTML khác hoặc chèn một nút phần tử ra sau các phần tử con của một phần tử HTML khác:</p>

<div id="divid" style="border:1px solid #ddd; padding:10px">
    <p>Thẻ p 1</p>
    <p>Thẻ p 2</p>
    <p>Thẻ p 3</p>
</div>
<p id="pchen" style="color:blue">Chèn thẻ này ra sau các phần tử con khung thẻ p</p>
<p>Click DI CHUYỂN để di chuyển dòng chữ màu xanh ra sau các phần tử con khung thẻ p</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 mới tạo sau các phần tử con khung thẻ p</p>
<script>
function diChuyen() {
  // Lấy phần tử div id divid
  const divid = document.getElementById("divid");
  // Lấy phần tử p id pchen
  const pchen = document.getElementById("pchen");
  // Di chuyển phần tử pchen ra sau các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("beforeend", pchen);
}
function chenNut() {
   // Lấy phần tử div id divid	
  const divid = document.getElementById("divid");
  // Tạo nút phần tử h2
  const h2 = document.createElement('h2');
  h2.textContent = 'Thẻ h2';
  // Chèn nút phần tử h2 ra sau các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("beforeend", h2);
}
</script>
</body>
</html>

Chạy Thử

Những lưu ý khi sử dụng insertAdjacentElement() trong JavaScript

insertAdjacentElement() cho phép đưa một phần tử DOM mới vào vị trí xác định so với phần tử đang có. Tuy nhiên, để tránh làm sai cấu trúc giao diện hoặc tạo ra các thao tác DOM không cần thiết, cần chú ý vị trí chèn và trạng thái của phần tử trước khi thực hiện.

Chọn đúng vị trí chèn để tránh thay đổi sai cấu trúc HTML

Điểm cần quan tâm đầu tiên là tham số vị trí. Phương thức này hỗ trợ bốn vị trí gồm beforebegin, afterbegin, beforeend và afterend. Hai vị trí đầu và cuối nằm bên ngoài phần tử, trong khi hai vị trí còn lại tác động vào bên trong phần tử.

Chẳng hạn, nếu muốn thêm một phần tử vào cuối nội dung của một thẻ đang tồn tại, nên sử dụng beforeend. Nếu đặt nhầm thành afterend, phần tử mới sẽ nằm bên ngoài phần tử hiện tại và có thể khiến bố cục không còn đúng như mong muốn.

const box = document.querySelector('.box');
const item = document.createElement('div');

item.textContent = 'Nội dung mới';
box.insertAdjacentElement('beforeend', item);

Vì vậy, trước khi gọi phương thức, nên xác định rõ phần tử mới cần nằm trong hay ngoài phần tử hiện tại, đồng thời kiểm tra quan hệ giữa các phần tử để tránh làm thay đổi cấu trúc DOM ngoài ý muốn.

Kiểm tra phần tử và hiệu quả khi thao tác với DOM

Phần tử được truyền vào insertAdjacentElement() cần là một đối tượng Element hợp lệ. Nếu phần tử mục tiêu hoặc phần tử cần chèn chưa tồn tại, thao tác có thể không cho kết quả như dự kiến.

Với các giao diện có nhiều thao tác động, nên tạo phần tử và xử lý dữ liệu trước, sau đó mới đưa nó vào DOM ở vị trí cần thiết. Cách này giúp mã dễ kiểm soát hơn và hạn chế việc truy cập, thay đổi DOM liên tục.

Nếu phần tử được tìm bằng querySelector(), có thể kiểm tra kết quả trước khi tiếp tục xử lý:

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

if (container) {
    const item = document.createElement('p');
    item.textContent = 'Nội dung được thêm vào';
    container.insertAdjacentElement('beforeend', item);
}

Đặc biệt, không nên gọi phương thức nhiều lần chỉ để tạo những phần tử giống nhau khi một lần xử lý có thể đáp ứng yêu cầu. Việc tổ chức thao tác DOM hợp lý sẽ giúp mã JavaScript rõ ràng hơn và thuận tiện khi bảo trì.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức insertAdjacentElement 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 insertAdjacentElement 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) !