JavaScript Element insertBefore() 方法

• 

  JavaScript Element insertBefore() 方法

  insertBefore()方法将节点作为子节点插入到您指定的现有子节点之前。

  提示：如果要创建包含文本的新列表项，请记住将文本创建为附加到<li>元素的Text节点，然后将<li>插入列表。

  您还可以使用insertBefore方法插入/移动现有元素（请参阅“更多示例”）。

  实例：

  在<ul>元素的第一个子元素之前插入一个新的<li>元素：

  var newItem = document.createElement("LI");  //创建<li>节点
  var textnode = document.createTextNode("Water");  //创建一个文本节点
  newItem.appendChild(textnode);                    //将文本附加到<li>
  
  var list = document.getElementById("myList");    // 获取<ul>元素以插入新节点
  list.insertBefore(newItem, list.childNodes[0]);  // 在<ul>的第一个孩子之前插入<li>
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  insertBefore()	支持	支持	支持	支持	支持

• 

  语法

  node.insertBefore(newnode, existingnode)
• 

  参数值

  参数	类型	描述
  newnode	Node 对象	必需的。要插入的节点对象
  existingnode	Node 对象	必需的。 要在之前插入新节点的子节点。 如果设置为null，则insertBefore方法将在结尾插入newnode

• 

  技术细节

  项目	描述
  返回值：	Node对象，表示插入的节点
  DOM版本	Core Level 1

• 

  更多例子

  将<li>元素从一个列表移动到另一个列表：

  var node = document.getElementById("myList2").lastChild;
  var list = document.getElementById("myList1");
  list.insertBefore(node, list.childNodes[0]);
  

  尝试一下