HTML DOM insertBefore() 方法
实例
在 <ul> 元素的第一个子元素之前插入一个新的 <li> 元素:
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>
亲自试一试 »
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>
页面下方有更多实例。
定义和用法
insertBefore() 方法将节点作为子节点插入，就在您指定的现有子节点之前。
提示: 如果要使用文本创建新的列表项，请记住将文本创建为附加到<li>元素的文本节点，然后将<li>插入列表。
还可以使用 insertBefore 方法插入/移动现有元素（请参阅"更多实例"）。
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| insertBefore() | Yes | Yes | Yes | Yes | Yes |
语法
node.insertBefore(newnode, existingnode)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | Node object | 必需。要插入的节点对象 |
| existingnode | Node object | 必需。要在之前插入新节点的子节点。如果设置为 null，insertBefore 方法将在末尾插入新节点 |
技术细节
| 返回值: | Node 节点对象，表示插入的节点 |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
将 <li> 元素从一个列表移动到另一个列表:
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]);
