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.insertAdjacentHTML() trong JavaScript bạn đã biết cách dùng?

@devnavJan 12, 20232 min read...

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

Element.insertAdjacentHTML() JavaScript

Method Element.insertAdjacentHTML() nhận một đoạn text, sau đó phân tích cú pháp (parse) thành HTML hoặc XML để thêm vào DOM tại một ví trí chỉ định.

Syntax

Element.insertAdjacentHTML(position, text)

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.
text là một chuỗi sẽ được parse dưới dạng HTML hoặc XML để chèn vào DOM.
Giá trị trả về của nó là 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 -->

Sau đây, cùng xem một đoạn code mô phỏng cách sử dụng insertAdjacentHTML().

Trước tiên, chúng ta sẽ tạo HTML và JavaScript như bên dưới.

<body>
    <div>
      <form action="index.html" id="homiedev-form">
        <div>
          <select name="position" id="position">
            <option value="beforebegin">beforebegin</option>
            <option value="afterbegin">afterbegin</option>
            <option value="beforeend">beforeend</option>
            <option value="afterend">afterend</option>
          </select>
          <textarea
            placeholder="Thêm HTML string ..."
            name="text"
            cols="20"
            rows="5"
          ></textarea>
        </div>
        <button type="submit">Insert</button>
        <button type="button" id="reset">Reset</button>
      </form>

      <main>
        I'm here
        <div id="box"></div>
      </main>
    </div>

    <script>
      document
        .getElementById("homiedev-form")
        .addEventListener("submit", function (e) {
          e.preventDefault();

          const formData = new FormData(this);

          const text = formData.get("text") || "<strong>inserted text</strong>";
          const position = formData.get("position");

          document.getElementById("box").insertAdjacentHTML(position, text);
        });

      document.querySelector("#reset").addEventListener("click", () => {
        document.location.reload();
      });
    </script>
</body>

Chúng ta sẽ được như sau, các bạn có thể thêm một đoạn HTML string để test thử nhé.

Nếu bạn không muốn parse một HTML string ví dụ '<div>hello</div>' thành một đoạn HTML thì có thể sử dụng insertAdjacentText() (thêm vào DOM một raw text), và lưu ý khi lấy thông tin từ input của user, các bạn nên xử lý đoạn text này (escape user input) vì không thể biết user truyền những mã gì vào. Điều này có thể gây ra vấn đề bảo mật của website ^^.

TABLE OF CONTENTS

Element.insertAdjacentHTML() trong JavaScript bạn đã biết cách dùng?

Element.insertAdjacentHTML() JavaScript

Syntax