Phương thức insertAdjacentElement trong JavaScript

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

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

Phương thức insertAdjacentElement trong JavaScript

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 trước hay sau nó.

phantudong: Phần tử động di chuyể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:

<div id="divid">
	<p>Thẻ p</p>
    <p>Thẻ p</p>
    <p>Thẻ p</p>
</div>
<h1 id="h1id" style="color:red">Thẻ h1</h1>
<p>Click DI CHUYỂN để di chuyển phần tử h1 lên trước phần tử div id divid</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<div id="dividnut">
	<p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
</div>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 trước thẻ div id dividnut</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ử h1 lên trước phần tử div id divid
  divid.insertAdjacentElement("beforebegin", h1id);
}
function chenNut() {
   // Lấy phần tử div id dividnut	
  const dividnut = document.getElementById("dividnut");
  // 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ẻ div id dividnut
  dividnut.insertAdjacentElement("beforebegin", h2);
}
</script>

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:

<h1 id="h1id" style="color:red">Thẻ h1</h1>
<div id="divid">
	<p>Thẻ p</p>
    <p>Thẻ p</p>
    <p>Thẻ p</p>
</div>
<p>Click DI CHUYỂN để di chuyển phần tử h1 lên sau phần tử div id divid</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<div id="dividnut">
	<p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
</div>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 sau thẻ div id dividnut</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ử h1 lên sau phần tử div id divid
  divid.insertAdjacentElement("afterend", h1id);
}
function chenNut() {
   // Lấy phần tử div id dividnut	
  const dividnut = document.getElementById("dividnut");
  // 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ẻ div id dividnut
  dividnut.insertAdjacentElement("afterend", h2);
}
</script>

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:

<div id="divid">
	<p>Thẻ p</p>
    <p>Thẻ p</p>
    <p>Thẻ p</p>
</div>
<h1 id="h1id" style="color:red">Thẻ h1</h1>
<p>Click DI CHUYỂN để di chuyển phần tử h1 lên trước các phần tử con của thẻ div có id divid</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<div id="dividnut">
	<p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
</div>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 trước các phần tử con của thẻ div có id dividnut</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ử h1 lên trước các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("afterbegin", h1id);
}
function chenNut() {
   // Lấy phần tử div id dividnut	
  const dividnut = document.getElementById("dividnut");
  // 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 dividnut
  dividnut.insertAdjacentElement("afterbegin", h2);
}
</script>

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:

<h1 id="h1id" style="color:red">Thẻ h1</h1>
<div id="divid">
	<p>Thẻ p</p>
    <p>Thẻ p</p>
    <p>Thẻ p</p>
</div>
<p>Click DI CHUYỂN để di chuyển phần tử h1 ra sau các phần tử con của thẻ div có id divid</p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<div id="dividnut">
	<p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
    <p>Thẻ p chèn nút mới</p>
</div>
<button onclick="chenNut()">CHÈN NÚT</button>
<p>Click CHÈN NÚT để chèn nút phần tử h2 ra sau các phần tử con của thẻ div có id dividnut</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ử h1 ra sau các phần tử con của thẻ div có id divid
  divid.insertAdjacentElement("beforeend", h1id);
}
function chenNut() {
   // Lấy phần tử div id dividnut	
  const dividnut = document.getElementById("dividnut");
  // 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 dividnut
  dividnut.insertAdjacentElement("beforeend", h2);
}
</script>

Chạy Thử

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.

Bùi Tấn Lực

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 *

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