HTML DOM insertBefore method
Examples
Add items to the list:
document.getElementById("myList").insertBefore( newItem,existingItem );
Before adding:
- Coffee
- Tea
After you add:
- Water
- Coffee
- Tea
try it"
Definition and Usage
insertBefore () method inserts a new child node before an existing child node.
Tip: If you want to create a new text list item after the LI element you should add a text node of an element, and then add the LI element in the list.
You can also use the insertBefore method to insert / remove elements that already exist.
Examples
Move a list item to another list item:
var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
Before adding:
- CoffeeTea
- Water
- Milk
After you add:
- Milk
- Coffee
- Tea
- Water
try it"
All major browsers support insertBefore () method
grammar
node.insertBefore(newnode,existingnode)
parameter
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | Node object | Required. The node object you want to insert |
| existingnode | 节点对象 | 必须。要添加新的节点前的子节点。 |
return value
| 类型 | 描述 |
|---|---|
| 节点对象 | The node you inserted |
technical details
| DOM version | Core Level 1 Node Object |
|---|