Phương thức HTML DOM insertBefore ()
Thí dụ
Chèn một phần tử <li> mới trước phần tử con đầu tiên của một phần tử <ul>:
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Phương thức insertBefore () chèn một nút dưới dạng nút con, ngay trước nút con hiện có mà bạn chỉ định.
Mẹo: Nếu bạn muốn tạo một mục danh sách mới với văn bản, hãy nhớ tạo văn bản dưới dạng nút Văn bản mà bạn thêm vào phần tử <li>, sau đó chèn <li> vào danh sách.
Bạn cũng có thể sử dụng phương thức insertBefore để chèn / di chuyển một phần tử hiện có (Xem "Ví dụ khác").
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| insertBefore() | Yes | Yes | Yes | Yes | Yes |
Cú pháp
node.insertBefore(newnode, existingnode)
Giá trị tham số
| Parameter | Type | Description |
|---|---|---|
| newnode | Node object | Required. The node object you want to insert |
| existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null, the insertBefore method will insert the newnode at the end |
Chi tiết kỹ thuật
| Giá trị trả lại: | Một đối tượng nút, đại diện cho nút được chèn |
|---|---|
| Phiên bản DOM | Đối tượng nút cấp độ lõi 1 |
Các ví dụ khác
Thí dụ
Di chuyển phần tử <li> từ danh sách này sang danh sách khác:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);