HTML DOM insertBefore() 方法

HTML DOM Element 对象

insertBefore()方法用作:在指定的现有子节点之前插入一个子节点。

如果给定的子对象是对文档中现有节点的引用,则insertBefore()将其从其当前位置移动到新位置(请参见下面的“更多示例”)。

使用appendchild()方法将一个节点添加到指定父节点的子节点列表的末尾。

语法:

node.insertBefore(newNode, existingNode)
var newElem = document.createElement("h3");  // 创建一个新的h3元素
var newContent = document.createTextNode("Hi there");  // 创建一些文本内容
newElem.appendChild(newContent);  // 将文本节点添加到新创建的h3

var body = document.body;  // 获取 BODY
body.insertBefore(newElem, body.childNodes[0]); // 在BODY的第一个子元素之前插入H3
测试看看‹/›

注意:如果要创建带有文本的新元素,请记住将文本创建为Text节点,然后将其附加到元素,然后将该元素附加到文档。

浏览器兼容性

所有浏览器完全支持insertBefore()方法:

方法
insertBefore()

参数值

参数描述
newNode您要插入的节点对象
existingNode您要在其之前插入新节点的子节点。如果设置为null,则insertBefore方法将在末尾插入newnode

技术细节

返回值:一个Node对象,表示插入的节点
DOM版本:DOM级别1

更多实例

创建一个<p>元素并将其插入到<div>元素中:

var para = document.createElement("p");   // 创建一个 <p> 节点
var txt = document.createTextNode("这是一个段落.");// 创建一个文本节点
para.appendChild(txt);// 追加文本到 <p>

var div = document.getElementById("demo");// 获取带有"id=demo"的DIV
div.insertBefore(para, div.childNodes[0]);// 在DIV的第一个子元素之前插入P节点
测试看看‹/›

此示例将元素从其当前位置移动到新位置:

var elem = document.getElementById("myList2").lastElementChild;
var list1 = document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);
测试看看‹/›

相关参考

HTML DOM参考:node.hasChildNodes()方法

HTML DOM参考:node.appendChild()方法

HTML DOM参考:node.removeChild()方法

HTML DOM参考:node.replaceChild()方法

HTML DOM参考:document.createElement()方法

HTML DOM参考:document.createTextNode()方法

HTML DOM参考:document.adoptNode()方法

HTML DOM参考:document.importNode()方法

HTML DOM Element 对象