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 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ử

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

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

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

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