HTML DOM insertBefore() 方法
元素对象实例
列表中添加项:
document.getElementById("myList").insertBefore(newItem,existingItem);
添加前:
- Coffee
- Tea
添加后:
- Water
- Coffee
- Tea
定义和用法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
实例
移动某个列表项到另一个列表项：
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]);
添加前:
- CoffeeTea
- Water
- Milk
添加后:
- Milk
- Coffee
- Tea
- Water
所有主要浏览器都支持 insertBefore() 方法
语法
node.insertBefore(newnode,existingnode)
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | 节点对象 | 必须。要插入的节点对象 |
| existingnode | 节点对象 | 必须。要添加新的节点前的子节点。 |
返回值
| 类型 | 描述 |
|---|---|
| 节点对象 | 你插入的节点/td> |
技术细节
| DOM 版本 | Core Level 1 Node Object |
|---|
同一个列表中，改变列表项的顺序：
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Water</li><li>Milk</li></ul> <p id="demo">单击该按钮改变列表项的顺序</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var list=document.getElementById("myList"); var node=list.getElementsByTagName("li"); list.insertBefore(node[3],node[1]); } </script>