before()方法用于在ChildNode父级的子级列表中插入一组Node对象或HTML DOMString对象。元素被插入到我们提到的ChildNode之前。
用法:
ChildNode.before(Node or DOMString)
参数:此方法接受上述和以下描述的单个参数:
nodes:它是必须在ChildNode之前插入的一组Node对象或HTML DOMString对象。
范例1:在此示例中,我们将元素元素节点插入子元素之前的DOM中。
HTML
HTML | DOM before() method
GeeksforGeeks
Child Node
click to add
// Get the parent element
var parent = document.getElementById("div");
console.log(parent)
// Get the element to add before
var para = document.getElementById("p");
// Function to add the element
function add() {
// Create a new element to add
const div = document.createElement("div");
div.innerHTML = "
new node
";// Insert the created element
para.before(div);
}
console.log(parent.outerHTML);
输出:
在输出中,可以看到单击按钮之后,在子
元素之前插入了一个新节点。
单击按钮之前:
单击按钮后:
范例2:在此示例中,我们将在子节点之前插入一些文本。
HTML
HTML | DOM before() method
GeeksforGeeks
Child Node
click to add
// Get the parent element
var parent = document.getElementById("div");
console.log(parent)
// Get the element to add before
var para = document.getElementById("p");
// Function to add the element
function add() {
// Insert a text element
// before this element
para.before(
"Text Added Before ChildNode");
}
console.log(parent.outerHTML);
输出:
单击按钮之前:
单击按钮后:
支持的浏览器:下面列出了DOM before()方法支持的浏览器:
谷歌浏览器
Edge
Firefox
Opera