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>

尝试一下 »

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 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

元素对象参考手册 元素对象