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.insertAdjacentText() trong JavaScript và cách sử dụng

@devnavJan 17, 20233 min read...

JavaScript cung cấp cho chúng ta rất nhiều cách để thêm một Node vào DOM, các method có thể kể đến như: append(), appendChild(), Element.insertAdjacentHTML(), Element.insertAdjacentText(), Element.insertAdjacentElement(),...

Bạn có thể đọc bài hướng dẫn các method trên ở link bên dưới nhé:

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

Element.insertAdjacentText() JavaScript

Method Element.insertAdjacentText() nhận một text node (đơn giản là một chuỗi bất kì) để thêm vào DOM tại một ví trí chỉ định.

Syntax

Element.insertAdjacentText(position, data)

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.
data là text node sẽ được thêm vào DOM.
Giá trị trả về undefined.

Để 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 method insertAdjacentText() của JavaScript nhé.

let text = 'Đây là blog homiedev.com 🕵️‍♀️'

document.body.insertAdjacentText('afterbegin', text);

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

Kết quả tương tự như bên dưới:

<body>
    Đây là blog homiedev.com 🕵️‍♀️
    <div>Hi!</div>
</body>

Giả sử chúng ta thêm một element node vào insertAdjacentText(), chuyện gì sẽ xảy ra? cùng xem thử nhé.

let element = document.createElement('div');

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

Kết quả là đoạn "[object HTMLDivElement]" được thêm vào DOM, lý do là vì khi phát hiện element không phải là một đoạn text, JavaScript sẽ cố gắng chuyển nó sang kiểu string bằng cách sử dụng method toString() (method có trong object), tương tự thế này element.toString(). sau khi chuyển sang dạng string, ta sẽ nhận được đoạn text ở trên trong DOM.

👉 Các bạn có thể tìm hiểu thêm khái niệm Prototype trong JavaScript, nó rất hay và khi học JavaScript bạn cần biết. Khi đã hiểu prototype thì bạn sẽ biết method toString() được lấy từ đâu ra ^^.

Khi sử dụng insertAdjacentText() với một HTML string thì nó sẽ không chuyển sang dạng element node để thêm vào DOM, Nếu bạn muốn chuyển một đoạn string là HTML thì có thể tham khảo Element.insertAdjacentHTML() trong JavaScript. Ví dụ:
let text = "<div>Đây là blog homiedev.com 🕵️‍♀️</div>";
document.body.insertAdjacentText("afterbegin", text);
Kết quả nó sẽ không chuyển sang dạng element node.
<body>
   "<div>Đây là blog homiedev.com 🕵️‍♀️</div>"
   <div>Hi!</div>
</body>

Trên đây là bài viết về Element.insertAdjacentText(). 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.insertAdjacentText() trong JavaScript và cách sử dụng

Element.insertAdjacentText() JavaScript

Syntax