HTML DOM insertBefore() 方法

元素对象

列表中添加项:

<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>

尝试一下 »

---

定义和用法

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。

移动某个列表项到另一个列表项：

<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>

尝试一下 »

---

所有主要浏览器都支持 insertBefore() 方法

---

语法

node.insertBefore(newnode, existingnode)

参数

参数	类型	描述
newnode	Node object	Required. The node object you want to insert
existingnode	节点对象	必须。要添加新的节点前的子节点。

返回值

类型	描述
节点对象	The node you inserted

技术细节

DOM 版本	Core Level 1 Node Object

---

元素对象