Phương thức insertBefore() của đối tượng HTML DOM Element

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

insertBefore() Phương thức chèn phần tử con trước phần tử con hiện có.

Xin xem thêm:

Phương thức appendChild()

Phương thức replaceChild()

Phương thức removeChild()

Phương thức remove()

Thuộc tính childNodes

Thuộc tính firstChild

Thuộc tính lastChild

Thuộc tính firstElementChild

Thuộc tính lastElementChild

Mô hình

Ví dụ 1

  1. Tạo phần tử <li>
  2. Tạo nút văn bản
  3. Chèn văn bản vào phần tử <li>
  4. Chèn元素 <li> trước phần tử con đầu tiên của <ul>
const newNode = document.createElement("li");
const textNode = document.createTextNode("Nước");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Thử ngay

Ví dụ 2

Chuyển最后一个元素从一个列表移动到另一个列表的开头：

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Thử ngay

Ví dụ 3

Chuyển最后一个元素从一个列表移动到另一个列表的末尾：

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Thử ngay

Cú pháp

element.insertBefore(newnode, existingnode)

hoặc

node.insertBefore(newnode, existingnode)

Tham số

Tham số Mô tả
newnode Bắt buộc. Nút cần chèn (element).
existingnode

Tùy chọn. Chèn một nút con mới trước nút hiện có.

Nếu không quy định, phương thức insertBefore sẽ chèn newnode vào cuối.

Giá trị trả về

Loại Mô tả
Nút Nút được chèn vào.

Hỗ trợ trình duyệt

element.insertBefore() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ