Phương pháp HTML DOM Element insertAdjacentElement()

Định nghĩa và cách sử dụng

insertAdjacentElement() Phương pháp chèn phần tử vào vị trí chỉ định.

Vị trí hợp lệ:

Giá trị Mô tả
afterbegin Sau khi phần tử bắt đầu (phần tử con đầu tiên).
afterend Sau phần tử.
beforebegin Trước phần tử.
beforeend Trước khi phần tử kết thúc (phần tử con cuối cùng).

Mô hình

Ví dụ 1

Chèn một phần tử span sau tiêu đề:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

Thử ngay

Ví dụ 2

Sử dụng "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

Thử ngay

Ví dụ 3

Sử dụng "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

Thử ngay

Ví dụ 4

Sử dụng "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

Thử ngay

Cú pháp

element.insertAdjacentElement(position, element)

hoặc

node.insertAdjacentElement(position, element)

Tham số

Tham số Mô tả
position

Yêu cầu. Vị trí tương đối với phần tử:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element Thiết bị cần chèn.

Trình duyệt hỗ trợ

Tất cả các trình duyệt đều hỗ trợ element.insertAdjacentElement()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ