Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Element.insertAdjacentElement() trong JavaScript có gì hay?

@devnavJan 17, 20232 min read...

Khi muốn thêm một element vào DOM bằng JavaScript, chúng ta có một số cách như sử dụng: append(), appendChild(), Element.insertAdjacentHTML(), Element.insertAdjacentText(), Element.insertAdjacentElement(),...

Nếu bạn chưa tìm hiểu các method trên, có thể đọc tại đây 📖:

Trong bài viết này, chúng ta cùng tìm hiểu cách sử dụng Element.insertAdjacentElement() của JavaScript nhé.

Element.insertAdjacentElement() JavaScript

Method Element.insertAdjacentElement() nhận một đối tượng có kiểu element để thêm vào DOM tại một ví trí chỉ định.

Syntax

Element.insertAdjacentElement(position, element)

Trong đó:

position là ví trí muốn thêm node, bao gồm các vị trí:
1. "beforebegin": Trước Element. Chỉ hợp lệ nếu phần tử nằm trong DOM và có parent element.
2. "afterbegin": Bên trong Element, trước first child của nó.
3. "beforeend": Bên trong Element, sau last child của nó.
4. "afterend": Sau Element. Chỉ hợp lệ nếu phần tử nằm trong DOM và có parent element.
element là đối tượng sẽ được thêm vào DOM.
Giá trị trả về nếu thêm thành công là element đã thêm vào DOM.

Để dễ hình dung và hiểu các vị trí khi sử dụng method, các bạn có thể quan sát nội dung bên dưới:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  homiedev
  <!-- beforeend -->
</div>
<!-- afterend -->

Tiếp theo, cùng xem một vài ví dụ về cách sử dụng insertAdjacentElement() nhé.

Để thêm một element vào DOM, trước tiên các bạn có thể tạo ra một element bằng cách sử dụng document.createElement().

let pElement = document.createElement('p');
pElement.innerText = 'homiedev.com';

document.body.insertAdjacentElement('afterbegin', pElement);

Ở ví dụ trên, chúng ta đang thêm một thẻ p vào trong body với vị trí là sau thẻ mở <body>.

Nếu thêm một giá trị không phải là kiểu element, chúng ta sẽ nhận được một lỗi:

document.body.insertAdjacentElement('afterbegin', 'element');

// ❌ lỗi Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'

Như các bạn thấy compiler sẽ báo lỗi vì 'element' không phải là kiểu Element như insertAdjacentElement() muốn.

Trên đây là bài viết về Element.insertAdjacentHTML(). Hi vọng bài viết giúp ích cho các bạn. Cảm ơn các bạn đã đọc bài viết.

Nếu chưa rõ về nội dung ở trên, chúng ta cùng thảo luận ở phần bình luận nhé 😃.

TABLE OF CONTENTS

Element.insertAdjacentElement() trong JavaScript có gì hay?

Element.insertAdjacentElement() JavaScript

Syntax