定义和用法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
所有主要浏览器都支持 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>实例
列表中添加项：
<!DOCTYPE html>
<html>
<title>Web176教程网(web176.com)</title>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><strong>注意:</strong><br>首先创建一个li节点,<br>然后创建一个文本节点,<br>然后添加文本节点的在li节点。<br>最后在第一个子节点列表插入li节点。</p>
</body>
</html>移动某个列表项到另一个列表项：
<!DOCTYPE html>
<html>
<title>Web176教程网(web176.com)</title>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">单击该按钮将一个项目从一个列表移动到另一个列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/4420.html
支付宝 
微信 