Metodo insertBefore() di HTML DOM

Oggetto Element HTML DOM

insertBefore()Il metodo viene utilizzato: inserire un nodo secondario prima del nodo secondario esistente specificato.

Se l'oggetto secondario fornito è un riferimento a un nodo esistente nel documento, insertBefore() lo sposta dalla sua posizione attuale alla nuova posizione (vedi anche gli esempi di seguito).

使用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()方法：

参数值

技术细节

更多实例

创建一个<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节点

Questo esempio sposta un elemento dalla sua posizione corrente a una nuova posizione:

var elem = document.getElementById("myList2").lastElementChild;
var list1 = document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

Riferimenti Correlati

Riferimento HTML DOM:nodeMetodo .hasChildNodes()

Riferimento HTML DOM:nodeMetodo .appendChild()

Riferimento HTML DOM:nodeMetodo .removeChild()

Riferimento HTML DOM:nodeMetodo .replaceChild()

Riferimento HTML DOM:Metodo document.createElement()

Riferimento HTML DOM:Metodo document.createTextNode()

Riferimento HTML DOM:Metodo document.adoptNode()

Riferimento HTML DOM:Metodo document.importNode()

Oggetto Element HTML DOM