Node: phương thức insertBefore()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức insertBefore() của giao diện Node chèn một nút đứng trước một nút tham chiếu như một phần tử con của một nút cha đã chỉ định.
Nếu nút đã cho đã tồn tại trong tài liệu, insertBefore() sẽ di chuyển nó từ vị trí hiện tại sang vị trí mới. (Tức là nó sẽ tự động bị xóa khỏi nút cha hiện có trước khi được thêm vào nút cha mới đã chỉ định.)
Điều này có nghĩa là một nút không thể ở hai vị trí của tài liệu cùng lúc.
Note:
Có thể dùng Node.cloneNode() để tạo một bản sao của nút trước khi thêm nó vào nút cha mới. Lưu ý rằng các bản sao được tạo bằng cloneNode() sẽ không tự động được đồng bộ hóa.
Nếu phần tử con được cho là một DocumentFragment, toàn bộ nội dung của DocumentFragment sẽ được chuyển vào danh sách phần tử con của nút cha đã chỉ định.
Cú pháp
insertBefore(newNode, referenceNode)
Tham số
newNode-
Nút cần chèn.
referenceNode-
Nút mà
newNodesẽ được chèn trước. Nếu lànull, thìnewNodesẽ được chèn vào cuối danh sách nút con của nút.
Giá trị trả về
Trả về phần tử con đã được thêm (trừ khi newNode là một DocumentFragment, trong trường hợp đó trả về DocumentFragment rỗng).
Ngoại lệ
Kiểm tra tính hợp lệ trước khi chèn.
Ví dụ
Ví dụ 1
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Tạo nút mới để chèn
const newNode = document.createElement("span");
// Lấy tham chiếu đến nút cha
const parentDiv = document.getElementById("childElement").parentNode;
// Bắt đầu trường hợp kiểm thử [ 1 ]: childElement hiện có (hoạt động đúng)
let sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// Kết thúc trường hợp kiểm thử [ 1 ]
// Bắt đầu trường hợp kiểm thử [ 2 ]: childElement có Type undefined
sp2 = undefined; // Nút không tồn tại có id "childElement"
parentDiv.insertBefore(newNode, sp2); // Ép kiểu động ngầm định sang kiểu Node
// Kết thúc trường hợp kiểm thử [ 2 ]
// Bắt đầu trường hợp kiểm thử [ 3 ]: childElement có Type "undefined" (chuỗi)
sp2 = "undefined"; // Nút không tồn tại có id "childElement"
parentDiv.insertBefore(newNode, sp2); // Tạo ra "Type Error: Invalid Argument"
// Kết thúc trường hợp kiểm thử [ 3 ]
Ví dụ 2
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Tạo một phần tử <span> mới, thuần túy
const sp1 = document.createElement("span");
// Lấy phần tử tham chiếu
const sp2 = document.getElementById("childElement");
// Lấy phần tử cha
const parentDiv = sp2.parentNode;
// Chèn phần tử mới trước sp2
parentDiv.insertBefore(sp1, sp2);
Note:
Không có phương thức insertAfter().
Có thể mô phỏng nó bằng cách kết hợp phương thức insertBefore
với Node.nextSibling.
Trong ví dụ trước, sp1 có thể được chèn sau sp2 bằng:
parentDiv.insertBefore(sp1, sp2.nextSibling);
Nếu sp2 không có nút anh em tiếp theo, thì nó phải là nút con cuối cùng -
sp2.nextSibling trả về null, và sp1 được chèn
vào cuối danh sách nút con (ngay sau sp2).
Ví dụ 3
Chèn một phần tử trước phần tử con đầu tiên, dùng thuộc tính
firstChild.
// Lấy phần tử cha
const parentElement = document.getElementById("parentElement");
// Lấy phần tử con đầu tiên của phần tử cha
const theFirstChild = parentElement.firstChild;
// Tạo phần tử mới
const newElement = document.createElement("div");
// Chèn phần tử mới trước phần tử con đầu tiên
parentElement.insertBefore(newElement, theFirstChild);
Khi phần tử không có phần tử con đầu tiên, thì firstChild là null. Phần tử vẫn được gắn vào nút cha, sau phần tử con cuối cùng.
Vì phần tử cha không có phần tử con đầu tiên, nên nó cũng không có phần tử con cuối cùng. Do đó, phần tử mới được chèn là phần tử duy nhất.
Thông số kỹ thuật
| Specification |
|---|
| DOM # dom-node-insertbefore |